html - 将“小部件”样式化为内联并在较小的屏幕下彼此下方

Question

我的网站主屏幕上有小部件。我要做的是在大屏幕上将它们彼此相邻（垂直）放置，并在较小的屏幕上彼此下方（水平）放置。

我怎样才能做到这一点？这是我到目前为止所拥有的：

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
}


/*#main-content .widget {           
            display:inline-block;
        }*/

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}


/*.blog-info {
        margin: 0 0 10px;
        font-size: .9em;
        color: #787878;
    }

    #sidebar #blogs .blog-info {
        display:inline-flex;
    }*/

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

这是它目前的样子：

标签： htmlcssalignment

Answer 1

添加display: flex到您的main-content，以使它们在桌面视图中并排放置。使用媒体查询将flex-direction切换到column移动视图中。

现在添加margin-right到第一个小部件（news）以将其包装起来 - 请参见下面的演示，内联解释：

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
  display: flex; /* keeps them horizontal in normal view */
}

#news { /* margin to separate the widgets */
  margin-right: 20px;
}

@media screen and (max-width: 768px) { /* mobile view */
  #main-content {
    flex-direction: column; /* switch to vertical */
  }
  
   #news{ /* in mobile view we don't need the right margin */
     margin-right: 0;
   }
}

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>