在右侧添加div

Question

所以我有一个愚蠢的问题，如何让我的div在右侧？我有主要内容，但我需要在右侧设置四个div。它看起来像this，我需要添加 div1 - 4 。我应该在width:100%; float: left中添加.main_container吗？

问题＃2 - 我想将 main_info1 - 3 分组到一个div下，例如 main ，这样我就可以在{{1}的css中使用.main所有div的属性，无需重复，但当我这样做时， main_info2 会跳起并忽略 main_info1 列表。感谢。

HTML：

max-width: 900px; overflow: hidden; margin-left: 20px;

CSS：

<div class="main_container">
<div class="title_container">
    <h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
    <div class="block1">
        <span>Text</span>
    </div>
    <div class="block2">
        <span>Text</span>
    </div> 
</div>   
</aside>
<div class="content clearfix">
    <div class="image1">
        <img src="img/img1.jpg">
    </div>
    <div class="image2">
        <img src="img/img2.jpg">
    </div>
</div>
<div class="main_info">
    <h2>Title</h2>
    <p>Text</p>
</div>
<div class="main_info2 clearfix">
    <h2>Title</h2>
    <ul>
    <li>
    <p>Text</p>
    </li>
    </ul>
</div>
<div class="main_info3 clearfix">
    <h2>Title</h2>
    <p>Text</p>
</div>
</div>

Answer 1

我认为你是新手。你应该努力掌握HTML和CSS。 ：）

但是，这是一个解决方案。请仔细检查。希望你会得到你的答案。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  display: block;
}
.clearfix:after {
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
.wrapper {
  min-width: 1000px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
.title_container {
  padding-top: 50px 0 30px;
}
.title_container h1 {
  line-height: 66px;
}
.small_blocks {
  height: 55px;
  overflow: hidden;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 100;
  line-height: 52px;
  color: #fff;
}
.small_blocks > div {
  height: inherit;
  float: left;
  padding-left: 20px;
}
.small_blocks .block1 {
  background: #390b5d;
  width: 66.111111%;
}
.small_blocks .block2 {
  width: 33.888889%;
  background: #e26c34;
}
.content {
  /*height: 377px;*/
  overflow: hidden;
  margin-bottom: 60px;
}
.content > div img {
  width: 100%;
  height: auto;
}
.content .image1 {
  float: left;
  width: 29.777778%;
}
.content .image2 {
  float: left;
  width: 70.222222%;
  padding-left: 10px;
}
.main_container {
  width: 68.181818%;
  float: left;
}
.main_info {
  margin-bottom: 60px;
  background: #d7d7d7;
}
.main_info .head {
  padding-left: 20px;
  background: #000;
  color: #fff;
}
.main_info h2 {
  height: 34px;
  line-height: 34px;
}
.main_info .body {
  padding: 20px;
}
.sidebar {
  width: 31.818182%;
  padding-left: 20px;
  float: right;
}
.sidebar_block {
  min-height: 150px;
  margin-bottom: 20px;
  padding: 20px;
  background: #000;
  color: #fff;
}

＆＃13;

<div class="wrapper">
  <header class="title_container">
    <h1>Title</h1>
  </header>
  <main class="main_container">
    <div class="small_blocks">
      <div class="block1">
        <span>Block 1</span>
      </div>
      <div class="block2">
        <span>Block 2</span>
      </div>
    </div>
    <div class="content clearfix">
      <div class="image1">
        <img src="http://dummyimage.com/268x377/000/fff.jpg&text=image1">
      </div>
      <div class="image2">
        <img src="http://dummyimage.com/622x377/000/fff.jpg&text=image2">
      </div>
    </div>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-1 h2</h2>
      </div>
      <div class="body">
        Main info 1
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-2 h2</h2>
      </div>
      <div class="body">
        Main info 2
      </div>
    </section>
    <section class="main_info">
      <div class="head">
        <h2>Main Info-3 h2</h2>
      </div>
      <div class="body">
        Main info 3
      </div>
    </section>
  </main>
  <aside class="sidebar">
    <section class="sidebar_block">Div 1</section>
    <section class="sidebar_block">Div 2</section>
    <section class="sidebar_block">Div 3</section>
    <section class="sidebar_block">Div 4</section>
  </aside>
</div>

＆＃13;

＆＃13;

＆＃13;

关于评论中的问题：

1. 实际上float有效。当您使用固定宽度width: 420px;时，可能没有足够的空间让第二个ul将其容纳在一行中。使用width: 50%;或更低版本查看更改。或者，您可以在更宽的屏幕上查看，例如，1360px分辨率。
2. 是的，适用于较小的设备 这是一个基本的例子。我使用百分比值作为列宽。因此，在较小的设备中，列可能会变得非常窄。为了防止这种情况发生，我将min-width: 1000px用于.wrapper。这样可以防止较窄的列宽，但会在较小的设备中产生水平滚动条。