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的内容转移到新行。

是否可以在div2上强制div1而不指定CSS中的宽度？

Answer 1

看看它是否适合你： -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用flex-box。

Answer 2

只需移除float:left #div2并向其插入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

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

因此，您的选择是：

1. 使用px，％，calc，等等指定宽度。
2. 使用其他一些布局设计：例如flexbox或grid（检查是否全部 您必须支持使用它们的浏览器）
3. 如果要显示的内容实际上是某个表，请使用表格 数据。
4. 不要试图把所有东西都挤成一排。

Answer 4

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

Flexbox的

为了保证元素保持在同一行，它们可以是flex-items（除非您为容器指定flex-wrap: wrap）。因此，制作#cont1 flexbox容器会阻止您的商品移动到新行。对于flex-items，也会忽略float属性，并且可以选择指定项目的宽度。演示：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Grid

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

表

只需为容器添加display: table，为项目添加display: table-cell即可。演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

如果您在第一个div上定义了宽度，则可以在第二个calc(100% - div1Width)上使用div。您还需要添加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;即可。

e.g。

#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

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>