html两个部分在彼此之下并且旁边

时间：2017-07-30 15:25:21

标签： html css positioning

当我在页面中添加两个部分时，侧边栏垂直等于 第二部分，我需要我的第一部分，然后在旁边垂直相等。

我如何做到这一点？我在第1部分尝试float: left，在父部分尝试了display: inline，但这些似乎导致了＃34;突破＆＃34;。 当我在页面中添加两个部分时，侧边栏垂直等于 第二部分，我需要我的第一部分，然后在旁边垂直相等。

＆＃13;
＆＃13; 
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: #444;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0
}

body {
  background: #f7f7f7;
  min-height: 100%;
  height: auto;
  position: relative;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  font-weight: normal;
  font-size: 1em;
}

.site-header {
  position: relative;
  z-index: 99;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background: #FFF;
}

#page,
.container {
  width: 1124px;
  min-width: 240px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.header-inner {
  width: 100%;
  height: 100%;
  display: table;
  padding: 1% 0;
}

.secondary-navigation {
  background: #17aa1c;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

.main-navigation ul li {
  display: inline-block;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
}

.main-navigation ul li a {
  color: #fff;
}

.main-navigation ul li a:hover {
  color: #ff9;
}

.secondary-navigation {
  width: 100%!important;
}

.content-area {
  width: 55%;
  float: left;
  margin-left: 100px;
  margin-right: 1%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  -webkit-box-shadow: 0 1px 1px #c2c4c4;
  -moz-box-shadow: 0 1px 1px #c2c4c4;
  box-shadow: 0 1px 1px #c2c4c4;
  text-shadow: 0 1px 1px #FFF;
  clear: both;
}

.aside {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  text-shadow: 0 1px 1px #FFF;
}

.inner {
  padding: 10px;
}

.title {
  font-weight: 500;
  color: #444;
  text-transform: uppercase;
  margin: 0;
}

.post-info {
  display: inline-table;
  color: #919191;
  float: left;
  clear: both;
  width: 100%;
}

.post-info>span {
  display: inline-block;
  font-size: 0.9em;
  padding: 10px;
  color: #919191;
  text-transform: uppercase;
}
＆＃13; 
<section class="content-area">
  <article>
    <div class="inner">
      <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
      <div class="post-info">
        <span>Posted</span>
        <span>Category</span>
        <span>Date</span>
      </div>
      <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      </p>
      <div class="readmore"><a href="#">Readmore</a></div>
    </div>
  </article>
</section>

<section id="primary" class="content-area">
  <div class="inner">
    <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
    <div class="post-info">
      <span>Posted</span>
      <span>Category</span>
      <span>Date</span>
    </div>
    <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    </p>
    <div class="readmore"><a href="#">Readmore</a></div>
  </div>
</section>

<aside class="aside ">
  <div class="inner">
    <h3>Popular Posts</h3>
    <ul>
      <li><a href="#">tempor incididunt ut labore et doloreincididunt ut labore et</a></li>
      <li><a href="#">tempor incididunt ut labore et dolore</a></li>
      <li><a href="#">tempor incididuntincididunt ut labore et ut labore et dolore</a></li>
    </ul>
  </div>
</aside>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

只需将元素包装到flex-container中并删除float: left即可。演示：

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: #444;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0
}

body {
  background: #f7f7f7;
  min-height: 100%;
  height: auto;
  position: relative;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  font-weight: normal;
  font-size: 1em;
}

.site-header {
  position: relative;
  z-index: 99;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background: #FFF;
}

#page,
.container {
  width: 1124px;
  min-width: 240px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.header-inner {
  width: 100%;
  height: 100%;
  display: table;
  padding: 1% 0;
}

.secondary-navigation {
  background: #17aa1c;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

.main-navigation ul li {
  display: inline-block;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
}

.main-navigation ul li a {
  color: #fff;
}

.main-navigation ul li a:hover {
  color: #ff9;
}

.secondary-navigation {
  width: 100%!important;
}

.content-area {
  width: 55%;
  margin-left: 100px;
  margin-right: 1%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  -webkit-box-shadow: 0 1px 1px #c2c4c4;
  -moz-box-shadow: 0 1px 1px #c2c4c4;
  box-shadow: 0 1px 1px #c2c4c4;
  text-shadow: 0 1px 1px #FFF;
  clear: both;
}

.aside {
  width: 20%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  text-shadow: 0 1px 1px #FFF;
}

.inner {
  padding: 10px;
}

.title {
  font-weight: 500;
  color: #444;
  text-transform: uppercase;
  margin: 0;
}

.post-info {
  display: inline-table;
  color: #919191;
  float: left;
  clear: both;
  width: 100%;
}

.post-info>span {
  display: inline-block;
  font-size: 0.9em;
  padding: 10px;
  color: #919191;
  text-transform: uppercase;
}

.flex {
  display: flex;
}
<div class="flex">
  <section class="content-area">
    <article>
      <div class="inner">
        <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
        <div class="post-info">
          <span>Posted</span>
          <span>Category</span>
          <span>Date</span>
        </div>
        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        </p>
        <div class="readmore"><a href="#">Readmore</a></div>
      </div>
    </article>
  </section>
  
  <aside class="aside ">
    <div class="inner">
      <h3>Popular Posts</h3>
      <ul>
        <li><a href="#">tempor incididunt ut labore et doloreincididunt ut labore et</a></li>
        <li><a href="#">tempor incididunt ut labore et dolore</a></li>
        <li><a href="#">tempor incididuntincididunt ut labore et ut labore et dolore</a></li>
      </ul>
    </div>
  </aside>
</div>

<section id="primary" class="content-area">
  <div class="inner">
    <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
    <div class="post-info">
      <span>Posted</span>
      <span>Category</span>
      <span>Date</span>
    </div>
    <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    </p>
    <div class="readmore"><a href="#">Readmore</a></div>
  </div>
</section>

相关问题
最新问题