Question

我的两个列分别占总屏幕宽度的41％和59％。列的高度为1102px。

在第一列中我有4个div。第一个用于导航，最大可以是60px。第二个是我正在使用的徽标。第三个是文本，第四个是最棘手的。我使用的图像尺寸和比例不同。我希望图像获得100％的宽度。

我的挑战是根据第一列中底部图像的高度，使第一个图像的高度和文本div成为动态。例如，当屏幕尺寸很大时，边距非常大：

＆＃13;

body{
  color: #fff;
  font-family: Arial;
}

.wrapper{
  background-color: #484848;
}

#col1{
  float:left;
  width:41%;
  height: 1102px;
  background-color: #E90649;
  position: relative;
}

img#productImg{
    width:100%;
    height:auto;

}
img#product{
  max-width:100%;

}
#col2{
  float: left;
  width:59%;
  height: 1102px;
  background-color: #124;  
}


div #centerText{
  width: 70%;
  margin: 0 auto;
  height:455px;
}

#productLogo{
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 70%;
}

.list {
  padding-right: 14px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline; 
    padding-left: 4px;
    color: #000;
    font-size: 18px;
    font-weight: lighter;
}

div.nav{
  padding-top: 3%;
  height:24px;
  padding-left: 5%;
}

#productImg img{
    width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li><a href="#home">HOME</a></li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
	</html>

＆＃13;

我使用了@media屏幕尺寸功能，但我对结果不满意，因为我必须在CSS中加入很多行。理想情况下，具有第一个徽标（stackoverflow）和文本的部分将垂直对齐到中心，padding-top，padding-bottom将具有相同的值（百分比）。这个div的高度将取决于底部图像的高度（这里可以进行JS解析？），因此使用CSS中的vw或vh可以动态显示文本。

是否有更简单的方法来对齐列中的div并保持所有内容不会中断（这是最初的问题）？

将div的边距保留在具有浮动底部图像的列中

0 个答案: