Question

我很难布局这个权利。两个div侧面坐在像这样的容器div中

<div style="width:800px; height:50px; border:solid 1px black;">
    <div id="LeftBox" style=" border:solid 2px red; width:500px; float:left " >Left box</div>
    <div id="RightBox" style=" border:solid 2px green;width:400px; float:right;" >green box</div>
</div>

如果左侧框足够小，它会并排显示两个框。如果左框太长则右边的框将删除一行，我不希望这种行为。我想设置正确的方框无论左框有多长，它都在哪里。请帮忙!!!!!

Answer 1

您可以使用绝对定位，然后元素不会相互影响：

#Box {
  position: relative;
  width: 800px;
  height: 50px;
  border: 1px solid black;
}

#LeftBox {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid red;
  width: 500px;
}

#RightBox {
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid green;
  width: 400px;
}

<div id="Box">
    <div id="LeftBox">Left box</div>
    <div id="RightBox">green box</div>
</div>

Answer 2

如果您想要删除左框而不是右框，只需更改div的顺序：

DROP LEFT INSTEAD：

<div style="width:800px; height:50px; border:solid 1px black;">
    <div id="RightBox" style=" border:solid 2px green;width:400px; float:right;" >green box</div>
    <div id="LeftBox" style=" border:solid 2px red; width:500px; float:left " >Left box</div>
</div>

如果您将容器div的宽度设置为小于嵌套div的组合宽度，则其中一个div将需要低于另一个。

Answer 3

您也可以尝试像css-tricks recommends那样将float: right现在渗入的容器设置为clear: both

HTML浮动右键下降到下一行

3 个答案: