Question

I can't float my second div.

I used 70% from my website for my posts and I wanted to use 30% to display a little text or something.

So i created a div and from what I know, I have to use "float: left" in order to let that div to go to the right place, under the banner.

I will post some pictures to let you know what I want.

I want that red div to go there :

There is my 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>

Can you tell me what's wrong?

Also, could you tell me if the code looks nice or something?

Answer 1

只需将float: left;添加到您的两个div（左侧和右侧div）。
您可以在此处查看已实施的代码：https://jsfiddle.net/723fgs4d/1/

Answer 2

将 .left-content 的位置设为绝对

.left-content{
width: 70%;
border-right: 1px solid black;
height: 900px;
position: absolute;
}

将 .right-content 的宽度设置为30％（可选），margin-left：auto，并删除浮动线。

.right-content{
width: 30%;
height:200px;
background-color: red;
margin-left: auto;
position: relative;
}

Answer 3

您可以使用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>

float:left in a div not working as expected

3 个答案: