html - float :left in a div not working as expected

标签 html css responsive-design

我无法 float 我的第二个 div

我在我的帖子中使用了我网站的 70%,我想使用 30% 来显示一些文本或其他内容。

所以我创建了一个 div,据我所知,我必须使用“float: left”才能让 div 到达正确的位置,在旗帜下。

我会张贴一些图片让你知道我想要什么。

我想让那个红色的 div 去那里:

SS

这是我的 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>

你能告诉我哪里出了问题吗?

另外,你能告诉我代码是否好看吗?

最佳答案

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

关于html - float :left in a div not working as expected,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37901234/

相关文章:

wordpress - 您可以使iFrame响应式吗?

html - 当屏幕尺寸低于 1180 像素时,CSS 响应式设计页脚占据整个空间

android - 我的网站无法在 iPhone 上正确缩放

html - Chrome 中带有圆 Angular 边框的 `overflow:hidden` 父级泄漏

html - 使用 srcset 和 sizes 时 width 和 height 属性有什么作用?

html - 另一个类下的第 n 个子选择器 CSS

jquery - 如何在主 div 容器中居中表单请求 div

html - 当被迫分成两行时,如何使列表中的间距更大?

放大/缩小时 HTML Div 移动

html - 如何让我的响应式设计看起来更大?