Question

我正在构建一个响应式应用登录页面，并且在清除未浮动的内联块方面存在问题。 .rightphone“流血”比父母.container的下边距低20％，并且不会清楚.content这是一个位于.container以下的兄弟姐妹。在调整浏览器大小并使内联块位于彼此之下时，情况会更糟。

我知道我可以左右浮动这些项目并让.content执行clear:both但是这会阻止块在调整屏幕大小之后在彼此之间（它们现在这样做）对齐。< / p>

如何让.content清除.rightphone？

CSS：

.container {
background: url(../img/bg.png) no-repeat;
background-size: cover;
height: 550px;
margin-top: -10px;
margin-left: -10px;
margin-right:-10px;
position: relative;
text-align: center;
}

.leftpromotext {
display:inline-block;
margin-top: 5%;
position: relative;
vertical-align: top;
min-width: 400px;
max-width: 600px;
}

.rightphone {
background: url(../img/screen.png) no-repeat center;
background-size: contain;
display: inline-block;
position: relative;
width:400px;
height:120%;
}

.content {
display: block;
position: relative;
clear: both;
}

HTML：

<body>
<div class="container">
<div class="leftpromotext">
<img id="logo" src="img/banner.png"/>
<h1 class="grey">Out now!!</h1>
<p class="grey"> Awesome, more text. </p>
</div>
<div class="rightphone"></div>
</div>
<div class="content">
<h1>HEllo I am content!</h1>
<p>I am additional text. Feels fun to be me. </p>
</div>

</body>

清除内联块（响应式布局）

0 个答案: