Question

现在，我有两个浮动元素彼此相邻。一个float:left，一个float:right。我为左侧设置了min-width，以便在我将屏幕尺寸调整为较小尺寸时，元素不会重叠。现在当我把它变小时，右边的元素就会流到左边元素的底部。如何使正确的元素就位并可调整大小？

Answer 1

对元素使用display:inline-block;并记住不要在它们之间放置任何空格。有一个很好的教程here。

但是，使用最小宽度，你的div会清除。在这种情况下尝试使用flexbox。

对于flex容器，您可以使用以下内容：

.flex-container {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: stretch;
        align-items: flex-start;
    }

对于你的div，就像这样。

.flex-item:nth-child(1) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    min-width: 150px;
}

.flex-item:nth-child(2) {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

.flex-container {
  background: black;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  padding: 20px;
}
.flex-item:nth-child(1) {
  background: yellow;
  order: 0;
  height: 150px;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 150px;
}
.flex-item:nth-child(2) {
  background: green;
  height: 150px;
  order: 0;
  flex: 0 1 auto;
  width: 100px;
  align-self: auto;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Answer 2

以下是3个解决方案，所有解决方案都将.left和.right元素保留在一行中，

如果您需要在旧版和新版浏览器上使用

，请先display: table

.wrapper {
  display: table;
}
.left {
  display: table-cell;
  width: 30%;
  min-width: 160px;
  background: lightgray;
}
.right {
  display: table-cell;
  background: lightgray;
  border-left: 2px solid white;
}

<div class="wrapper">
  <div class="left">
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
  </div>
  <div class="right">
    Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text 
  </div>
</div>

第二，flexbox适用于较新的浏览器（推荐）

.wrapper {
  display: flex;
}
.left {
  width: 30%;
  min-width: 160px;
  background: lightgray;
}
.right {
  flex: 1;
  background: lightgray;
  margin-left: 2px;
}

<div class="wrapper">
  <div class="left">
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
  </div>
  <div class="right">
    Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text 
  </div>
</div>

第三，display: inline-block + white-space: nowrap（适用于旧版和新版浏览器）

.wrapper {
  white-space: nowrap;
}
.left {
  display: inline-block;
  width: 30%;
  min-width: 160px;
  background: lightgray;
  white-space: normal;
  vertical-align: top;
}
.right {
  display: inline-block;
  width: 70%;
  background: lightgray;
  border-left: 2px solid white;
  white-space: normal;
  vertical-align: top;
}

<div class="wrapper">
  <div class="left">
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
    Left menu item<br>
  </div><div class="right">
    Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text Right content text 
  </div>
</div>

Answer 3

您可以使用display:inline-block而不是float来将两个元素放在一行上。试试吧，创建一个类将css-code添加到其中。定义宽度和高度，您将获得相同的效果。

.box {
  display: inline-block;
  width: 200px;
  height: 400px;
  border: 1px black dotted;
  padding: 10px 15px;
}

<div class="box">A box</div>
<div class="box">Second Box</div>

永远不要忘记设置height。如果你忘了这个并且它们有不同的高度，它们会失去控制。 ;）

Answer 4

不要漂浮正确的元素。它将占用剩余的空间。

div {
  border: 1px solid;
}
#left {
  float: left;
  width: 50%;
  min-width: 400px;
}
#right {
  overflow: hidden; /* Establish formatting context */
  /* It's a good idea to set some min-width */
}

<div id="left">Left</div>
<div id="right">Right</div>

Answer 5

也许你应该尝试使用flexbox。我从一周前就开始使用它，它非常强大。

也许是这样的。

https://jsfiddle.net/o0nb6as0/

＆＃13;

.container {
  display: flex;
  align-items: left;
}

.left {
  height: 100px;
  min-width: 200px;
  flex: 0 0 50%;
  background: #888;
}

.right {
    height: 100px;
    background: #aaa;
    flex: 1 1 auto;
}

＆＃13;

<div class="container">
  <div class="left">
  I am left and have min width.
  </div>
  <div class="right">
    I am right and have flexible width.
  </div>
</div>

＆＃13;

如何使浮动元素不会移动

5 个答案: