CSS：强制浮动：左而不指定 div 宽度答案

【问题标题】：CSS: force float:left without specifying div widthCSS：强制浮动：左而不指定 div 宽度
【发布时间】：2017-07-30 22:46:52
【问题描述】：

在以下代码中（https://jsfiddle.net/6t9n0wuu/）：

#cont1 {
  width: 50%
}

#div1 {
  width: 10px;
  float: left;
  border: 1px solid black
}

#div2 {
  float: left;
  border: 1px solid black
}

<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

div2 的内容移到新行。

是否可以强制 div2 与 div1 在顶部（即在同一行）而不在 CSS 中指定其宽度？

【问题讨论】：

那么你真正想要的宽度是多少？剩余宽度？ stackoverflow.com/questions/18961918/css-fill-remaining-width

标签： html css css-float

【解决方案1】：

看看它是否适合你：--

#cont1 {width: 50%}
#div1 {width:10px;float:left; border:1px solid black}
#div2 {border:1px solid black;margin-left:12px;}

<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

你也可以使用 flex-box。

【讨论】：

【解决方案2】：

只需删除#div2 中的float:left 并将margin-left:10px 插入其中。

#div2 {
  float: left;<---------Remove
  margin-left: 10px;<-----Added
  //more code.....
}

#cont1 {
  width: 50%;
}
#div1 {
  width:10px;
  float:left;
  border:1px solid black;
}
#div2 {
  border:1px solid black;
  margin-left: 10px;
}

<div id="cont1">
<div id="div1">a<br>b<br>c<br></div>
<div id="div2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【讨论】：

【解决方案3】：

不，你不能。如果没有以一种或另一种方式指定宽度，浮动将占用显示其内容所需的所有空间。由于其内容是一些文本，除非文本宽度小于该行的剩余宽度，否则它将始终转移到另一行。请注意，即使您设法修改内容以使其全部适合一行，一旦您更改容器的大小，例如通过调整窗口大小，浮动可以再次移动到另一行。

因此，您的选择是：

使用 px、%、calc 等指定宽度。
使用其他布局设计：例如flexbox 或网格（检查所有您必须支持的浏览器才能使用它们）
如果您想要显示的实际上是某个表格，请使用表格数据。
不要试图把所有东西都挤成一排。

【讨论】：

【解决方案4】：

强制元素保持在线的选项：

弹性盒

为了保证元素保持在同一行，它们可以是弹性项目（除非你为容器指定flex-wrap: wrap）。所以制作#cont1 flexbox 容器可以防止你的项目移动到新行。弹性项目也将忽略float 属性，并且可以选择为项目指定宽度。演示：

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: flex;
  width: 50%;
}

#div1, #div2 {
  border: 1px solid black
}

<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Grid

您只需将您的容器指定为网格容器并在您指定列宽的位置添加模板。演示：

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: grid;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  border: 1px solid black
}

<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

要在 IE10+/Edge 中工作，您需要使用旧语法并手动指定单元格放置，除非所有网格项都将堆叠在第一个单元格中。演示：

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: -ms-grid;
  display: grid;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  border: 1px solid black
}

#div2 {
  -ms-grid-column: 2;
}

<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

表格

只需为容器添加display: table，为物品添加display: table-cell。演示：

#cont1 {
  /* become a flex-container */
  /* its children will be a flex-items */
  display: table;
  width: 50%;
  grid-template-columns: auto auto;
}

#div1, #div2 {
  display: table-cell;
  border: 1px solid black
}

<div id=cont1>
  <div id=div1>a<br>b<br>c<br></div>
  <div id=div2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

【讨论】：

【解决方案5】：

如果您在第一个div 上定义了宽度，您可以在第二个div 上使用calc(100% - div1Width)。您还需要添加box-sizing: border-box，以便边框包含在元素的宽度中。

* {
  box-sizing: border-box;
}
#cont1 {
  width: 50%
}
#div1 {
  width: 10px;
  float: left;
  border: 1px solid black
}
#div2 {
  float: left;
  width: calc(100% - 10px);
  border: 1px solid black
}

<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

【讨论】：

【解决方案6】：

您可以使用 Flex 属性：

#cont1 {width: 50%; display: flex;}
#div1 {width:10px; border:1px solid black; flex: 0 0 10px}
#div2 {border:1px solid black; flex: 1 1 auto}

https://jsfiddle.net/6t9n0wuu/1/

【讨论】：

【解决方案7】：

您只需将您的 cont1 定义为 display: flex; 即可。

例如

#cont1 {width: 50%; display: flex;}
#div1 {width:10px; border:1px solid black; padding: 0px 20px;}
#div2 {border:1px solid black; padding:0px 20px;}

<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

这是一个小提琴link

【讨论】：

【解决方案8】：

也可以对容器使用overflow:visible;来强制浮动

#cont1 {width: 50%,overflow:visible;}
#div1 {width:10px;float:left; border:1px solid black}
#div2 {border:1px solid black;margin-left:12px;}

<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

【讨论】：

【解决方案9】：

#cont1 {width: 50%; display:flex;}
#div1 {width:10px;float:left; border:1px solid black}
#div2 { border:1px solid black}

<div id=cont1>
<div id=div1>a<br>b<br>c<br></div>
<div id=div2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

【讨论】：