html - CSS:强制 float:left 而不指定 div 宽度

标签 html css css-float

在以下代码中( 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 中指定其宽度?

最佳答案

看看它是否适合你:--

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

关于html - CSS:强制 float:left 而不指定 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45398798/

相关文章:

javascript - 提交操作后关注特定的 'id'

php - 使用 Imagemagick 应用绝对对比度和亮度

html - 页面底部的页脚,内容在其间延伸

css - 如何创建网格/平铺 View ?

html - 如何停止文本环绕一些 float 的 div?

css - 设置 div 高度等于屏幕尺寸

javascript - 在表单提交之前调用函数的更好方法是什么?

html - 如何在不改变所述图像尺寸的情况下显示图像的某个方面?

CSS float 搞砸了

javascript - 从右向左调整 div 大小