CSS zwei div Breite 50% in einer Zeile mit Zeilenumbruch in der Datei
Ich versuche, Flüssigkeit layout mit Prozentzahlen als breiten. Dies habe ich versucht, dieses:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
In diesem Fall pflegen Sie stehen in einer Zeile, aber wenn ich zu entfernen, Zeilenumbruch zwischen Ihnen, wie diese:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
dann funktioniert es einwandfrei. Wo ist das problem? Wie kann ich tun someting, wie das aber ohne die Verwendung von absoluten position und float.
p.s. sorry für Englisch.
p.s.s. ich hoffe, dass ich gut erklären, mein problem
InformationsquelleAutor der Frage Chris | 2012-05-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass, wenn etwas ist inline, jeder whitepsace ist eine tatsächliche Raum. So wird es Einfluss auf die Breite der Elemente. Ich empfehle die Verwendung von float oder display: inline-block. (Nur lassen Sie keine Leerzeichen zwischen die divs).
Demo: http://jsfiddle.net/N9mzE/1/
InformationsquelleAutor der Antwort meo
Das problem ist, dass, wenn Sie eine neue Zeile zwischen Ihnen ist in der HTML -, dann bekommen Sie ein Leerzeichen zwischen Ihnen, wenn Sie verwenden
inline-table
oderinline-block
50% + 50% + , space - > 100% und das ist, warum die zweite landet man unterhalb der ersten eine
Lösungen:
oder
oder
Die Idee ist nicht, um jede Art von Raum zwischen dem ersten schließenden div-tag und der zweiten öffnung div-tag in den HTML-Code.
PS - ich würde auch
inline-block
stattinline-table
für dieseInformationsquelleAutor der Antwort Ana
Geben diese
parent
DIV font-size:0. Schreiben wie dieses:InformationsquelleAutor der Antwort sandeep
Wickeln Sie um ein div mit folgenden CSS -
InformationsquelleAutor der Antwort Tichomir Mitkov
Ich weiß, diese Frage wollte inline-block, aber versuchen, http://jsfiddle.net/N9mzE/1/ im IE 7 (der älteste browser unterstützt, wo ich arbeite). Die divs werden nicht nebeneinander.
OP sagte, er wollte nicht, dass die Schwimmer, denn er mochte Sie nicht. Naja...meiner Meinung nach, macht gute Webseiten, die nicht seltsam Aussehen in jedem Browser die maingoal, und Sie tun dies, indem Sie schwebt.
Ehrlich gesagt, kann ich das problem sehen. Floats sind fantastisch.
InformationsquelleAutor der Antwort OptimusCrime
grundsätzlich
inline-table
ist für die element-Tabelle, ich denke, was Sie wirklich brauchen, hier istinline-block
wenn Sieinline-table
trotzdem, versuchen Sie es auf diese Weise:InformationsquelleAutor der Antwort S.831
Sorry, aber alle Antworten, die ich hier sehe sind entweder hacky oder fehlschlagen, wenn Sie niesen ein wenig härter.
Wenn Sie eine Tabelle verwenden, können Sie (wenn Sie möchten) fügen Sie ein Leerzeichen zwischen den divs, Grenzen setzen, Polsterung...
Prüfen Sie eine komplette Beispiel hier: http://jsfiddle.net/qPduw/5/
InformationsquelleAutor der Antwort Rui Marques
Das problem bei der Einstellung der Breite bis zu 50% ist die Rundung der Subpixel. Wenn die Breite der container ist also 99 Pixel, eine Breite von 50% resultiert in 2 Behälter von 50 Pixeln jedes.
Verwendung von float ist wahrscheinlich am einfachsten, und nicht so eine schlechte Idee. Sehen diese Frage für weitere Informationen, wie das problem zu beheben dann.
Wenn Sie nicht möchten, verwenden Sie schweben, versuchen Sie, eine Breite von 49%. Das wird funktionieren, cross-browser, soweit ich weiß, ist aber nicht pixel-perfekt..
html:
css:
InformationsquelleAutor der Antwort Wesley