浮点数:放在div中，不按预期工作。
浮点数:放在div中，不按预期工作。
提问于 2016-06-18 20:14:42
我不能浮动我的第二个div。
我在我的网站上使用了70%作为我的帖子，我想用30%来显示一些文本或其他东西。
因此，我创建了一个div，据我所知，我必须使用"float: left“，以便让div在横幅下到达正确的位置。
我会贴一些照片让你知道我想要什么。
我要那个红色的迪夫去那里：
这是我的codePen
<body>
<!-- the header of the website -->
<div class="header">
<div class="logo"><img src="https://s32.postimg.org/npddlgddx/logo.png"></div>
<div class="header-text">
<!-- uncomment this later
<h1>The Witcher</h1>
<h2>The Wild hunt</h2> -->
</div>
<div class="header-menu">
<ul>
<!-- header list -->
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- left content -->
<div class="left-content">
<div class="posts">
<h1> Blood and wine DLC </h1>
<!-- post images -->
<img src="https://s31.postimg.org/yvl2ismcr/photo1.png" class="img1" />
<h1 style="margin-top: 55px"> Expansion Pass </h1>
<img src="https://s31.postimg.org/lg5ef4et7/photo2.jpg" class="img1" />
</div>
</div>
<!-- right content -->
<div class="right-content"></div>
</body>
</html>你能告诉我怎么回事吗？
另外，你能告诉我密码看起来是不是很好吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-06-19 03:09:45
只需将float: left;添加到两个div(左和右div)。
您可以在这里看到实现的代码：https://jsfiddle.net/723fgs4d/1/
Stack Overflow用户
发布于 2016-06-18 21:26:17
将.左侧内容设置为绝对位置
.left-content{
width: 70%;
border-right: 1px solid black;
height: 900px;
position: absolute;
}将.right-content的宽度设置为30% (可选)，边距-左:自动，并移除浮标线.
.right-content{
width: 30%;
height:200px;
background-color: red;
margin-left: auto;
position: relative;
}Stack Overflow用户
发布于 2016-06-18 21:35:54
您可以简单地使用flexbox和删除float来修复这个问题。
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0;
background-color: #CED6D9;
}
/* header */
.header {
width: 100%;
height: 500px;
background: url("https://s31.postimg.org/8wabf75rf/header.jpg");
opacity: 0.9;
background-size: cover;
overflow: hidden;
}
.header-text {
color: black;
text-align: center;
overflow: hidden;
bottom: 0;
position: relative;
}
.header-text h2 {
margin-left: 30px;
}
.logo img {
width: 200px;
height: 150px;
}
.header-menu ul li {
list-style: none;
float: left;
padding: 15px 20px;
}
.header-menu ul li a {
text-decoration: none;
color: white;
}
.header-menu ul li:hover {
background-color: #8E8E8E;
border-radius: 7px;
}
.header-menu ul {
position: absolute;
top: 0;
right: 0;
}
/* content */
.main {
display: flex
}
.left-content {
width: 70%;
border-right: 1px solid black;
height: 900px;
}
.posts {
width: 55%;
height: 300px;
border-radius: 3px;
margin-top: 20px;
margin-left: 60px;
}
.posts .img1 {
height: 380px;
width: 100%;
}
.posts h1 {
text-align: center;
color: white;
}
.right-content {
width: 100px;
height: 200px;
background-color: red;
flex: 1
}
/* responsive */
@media only screen and (max-width: 800px) {
.left-content {
width: 100%;
border-right: none;
}
.posts {
width: 100%;
margin-left: 0px;
}
}
@media only screen and (max-width: 500px) {
.header-menu ul li a {
color: black;
display: block;
}
.logo {
width: 50%;
margin: auto;
}
.left-content {
width: 100%;
height: 400px;
}
.posts .img1 {
height: 200px;
}
}<!-- the header of the website -->
<div class="header">
<div class="logo">
<img src="https://s32.postimg.org/npddlgddx/logo.png">
</div>
<div class="header-text">
<!-- uncomment this later
<h1>The Witcher</h1>
<h2>The Wild hunt</h2> -->
</div>
<div class="header-menu">
<ul>
<!-- header list -->
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
</div>
<div class="main">
<!-- left content -->
<div class="left-content">
<div class="posts">
<h1> Blood and wine DLC </h1>
<!-- post images -->
<img src="https://s31.postimg.org/yvl2ismcr/photo1.png" class="img1" />
<h1 style="margin-top: 55px"> Expansion Pass </h1>
<img src="https://s31.postimg.org/lg5ef4et7/photo2.jpg" class="img1" />
</div>
</div>
<!-- right content -->
<div class="right-content"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37901234
复制相关文章
相似问题
腾讯云开发者
