CSS布局未正确对齐

Question

我正在尝试使用CSS实现图片中所示的布局。我目前在两个带有float:left;的文本区域中都使用width: 100%;，但是它们一直在左侧固定图像下方移动。

<div style="float:left;">
 <div style="width: 100px; height: 200px;">
   Some Image
 </div>
 <div style="float:left;">
  <div style="float:left; width: 100%;">Some text</div>
  <div style="float:left; width: 100%;">Some text</div>
 </div>
</div>

Answer 1

这不需要那么多的浮动宽度和/或显式宽度。

overflow:hidden可用于使浮动图像旁边的元素保持减小的宽度，而不是被布置在整个图像下（浮动通常具有的效果-div本身仍会覆盖整个宽度，只有它的 content 围绕图像流动。）

.container {
  width: 250px;
  outline: 1px dashed;
}

.container img {
  float: left;
}

.container div {
  overflow: hidden;
}

<div class="container">
  <img src="https://via.placeholder.com/100x200">
  <div>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
  </div>
</div>

Answer 2

这是更多样式问题，可以通过使第二个div右对齐/浮动来完成。此外，您也可以在外部div上使用width。

 <div style="float:left; width: 40%">
    <div style="width: 100px; height: 200px;">
      Some Image
    </div>
 <div>
 <div style="float:right; width: 60%">
    <div style="float:left; width: 100%;">Some text</div>
    <div style="float:left; width: 100%;">Some text</div>
 </div>

Answer 3

    <div style="float:left; width: 40%">
        <div style="width: 100px;">
          Some Image
        </div>
     <div>
     <div style="float:right; width: 60%">
        <div style="float:left;">Some text</div>
        <div style="float:left; width: 100%;">Some text</div>
     </div>

Problem is Height 200px is remove than check please

Answer 4

body{padding:20px;}
body div{margin:5px;}
.main{display:block; border:2px #333 solid;  width:100%;  overflow:hidden;}
.vert{ padding:1%; border:2px #333 solid; width:20%;
  height:200px; float:left; }
.vert img{width:100%}
.hor{position:relative; left:0px; righ:0px; width:66%; float:left; }
.hor div{border:2px #333 solid; width:99%;  margin-bottom:5px; padding:5%;}

<div class="main">
  <div class="vert"><img src="https://cdn4.buysellads.net/uu/1/3386/1525189887-61450.png"></div>
  <div class="hor">
  <div>Some Text some text some text</div>
  <div>Some Text some text some text</div>
    <div>Some Text some text some text</div>
  </div>
</div>