我创建了具有2个背景分割的两列布局,并应用了两种不同的背景颜色,即绿色和白色,并在其中插入了内容。 Iam不会自动获得白色背景高度。要显示,我需要固定高度(在这种情况下,高度为350x)。我希望高度是自动的,具体取决于内部元素。下面是我尝试的代码。
.main {
background-color: green;
padding: 40px;
}
.row {
background-color: white;
height: 350px;
}
.col1 {
width: 30%;
float: left;
text-align: center;
}
.col2 {
width: 60%;
float: left;
}
<div class="main">
<div class="row">
<div class="col1">
<img src="http://clipart-library.com/images/pcodkzBri.jpg" width="250px">
</div>
<div class="col2">
<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>
最佳答案
.row {
background-color: white;
height: auto;
display:inline-flex;
}
.col1 {
width: 30%;
float: left;
text-align: center;
margin:0 auto;
}
img{
width:100%;
}
.col2 {
width: 60%;
float: left;
margin:0 auto;
}
我认为您想要这样的东西。不要忘记从
width
标记中删除<img../>
属性。