Question

我在将“ main_articles”部分浮动到左侧时遇到了麻烦，因此“ social”部分出现在右侧，内容总是被弄乱或折叠。

这是下载网站文件的链接： https://ufile.io/pwd02

我希望能找到一个解决方案，如果做错了什么，对不起，我是新来的

Answer 1

您只需要定义一个表并将屏幕分为两列。将此行添加到您的css文件。

.row:after{
content:"";
display: table;
clear: both;
}
.column{
float: left;
width: 47%;
padding: 10px;
height: 100%;
}

然后您的html文件结构必须是这样的。

enter code here
<div class="container">
  <div class="row">
    <div class="column">
     <section class="main_articles">
     </section>
    </div>

   <div class="column">
    <section class="social">
    </section>
   </div>    
  </div>    
</div>

Answer 2

HTML代码

<div class="container">
    <section class="main_articles">
      <h1>WHAT'S NEW:</h1>
      <article>
        <h2>News Article 1</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
      <hr/>
      <article>
        <h2>News Article 2</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
      <hr/>
      <article>
        <h2>News Article 3</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
    </section>
    <section class="social">
        <h1>FIND ME ON:</h1>
          <ul>
            <li><a href="#"><span class="fb">Facebook</span></a></li>
            <li><a href="#"><span class="tw">Twitter</span></a></li>
            <li><a href="#"><span class="inst">Instagram</span></a></li>
            <li><a href="#"><span class="ldin">LinkdIn</span></a></li>
          </ul>
    </section>
  </div>

CSS代码

.container{
      max-width:960px;
      margin-left:auto;
      margin-right:auto;
    }

    /* ARTICLES */
    .container .main_articles{
      max-width:600px;
      background:#ebdeb2;
    }
    .main_articles article{
      padding:5px 10px 5px 10px;
      margin-top: 20px;
    }
    .main_articles h1{
      font-size: 20px;
      text-align:center;
      padding:5px;
      background:#000000;
      color:#ffffff;
    }
    .main_articles h2{
      font-size: 18px;
      margin-bottom:0px;
      text-decoration: underline;
    }
    .main_articles p{
      font-size: 15px;
      margin-top:0px;
    }
    /*END OF ARTICLES STYLES*/

    /* SOCIAL BOX STYLES */
    .container .social{
      height:220px;
      max-width:350px;
      margin-top:20px;
      background:#ebdeb2;
    }
    .social h1{
      font-size: 20px;
      text-align:center;
      padding:5px;
      background:#000000;
      color:#ffffff;
    }
    .social li{
        list-style: none;
        text-align: center;
        font-size:30px;
        font-weight: bold;
        margin-right:25px;
    }

左侧的浮动元素有问题

2 个答案: