CSS:强制浮点:左而不指定div宽度

Question

在下面的代码(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的内容将移至新行。

是否可以在不指定 CSS 中宽度的情况下强制div2作为(即在同一行(div1顶部？

Answer 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>

您也可以使用弹性盒。

Answer 2

只需删除#div2float: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>

Answer 3

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

因此，您的选择是：

1. 指定宽度，使用 px、%计算等。
2. 使用其他一些布局设计：例如弹性框或网格(检查是否所有 您必须支持的浏览器可以使用它们(
3. 如果要显示的内容实际上是某个表，请使用表 数据。
4. 不要试图将所有内容挤成一排。

Answer 4

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

弹性框

为了保证元素保持在同一行上，它们可以是弹性项目(除非您为容器指定flex-wrap: wrap(。因此，制作#cont1弹性框容器可防止您的项目移动到新行。此外，对于弹性项目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>

网 格

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

#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>

Answer 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>

Answer 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/

Answer 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>

这是一个小提琴链接

Answer 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>

Answer 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>