与浮动div不并排出现

Question

我试图通过使用浮动并排放置两个div，但它不工作。我可以通过使用CSS flexbox来实现它，但我特别需要使用浮点数。

提前感谢您的帮助。

HTML代码:

<div class="main">
<div class="first">
<div class="txt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
<div class="Img">
<img src="https://i.picsum.photos/id/559/200/200.jpg?hmac=YMqBxDHO4-upCRoX_Ho2FNQg40ANP2MndFXD8sPsSAc">
</div>
</div>
<div class="sec">
<div class="Img">
<img src="https://i.picsum.photos/id/559/200/200.jpg?hmac=YMqBxDHO4-upCRoX_Ho2FNQg40ANP2MndFXD8sPsSAc">
</div>
<div class="txt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>

</div>
</div>

CSS代码:

.main{
margin:auto; 
background: yellowgreen;
width:100%;
}
.main::after{
display:block;
content:'';
clear:both;
}
.first{
background:red;
padding:15px;
float:left;
width:50%;
}
.sec{
background:green;
padding:15px;
float:left;
width:50%;
}
.txt{
max-width:350px;
}
.Img{
margin:15px;
}

下面是我的代码示例:https://codepen.io/ANANTHUC/pen/eYWoqQv

Answer 1

添加display:flex; flex-direction:row;.main类。所以基本上你的代码看起来像:

.main{
margin:auto; 
background: yellowgreen;
width:100%;
display:flex;
flex-direction:row; 
}

你也可以从你的。sec类中删除float:left部分。

Answer 2

在第一类和第二类中都使用box-sizing: border-box;属性。此属性将使div正好占父元素宽度的50%。

默认情况下，元素的宽度和高度计算如下:

width + padding + border =元素的实际宽度Height + padding + border =元素的实际高度

详细信息:https://www.w3schools.com/css/css3_box-sizing.asp