显示彼此相邻的无序列表和图像

Question

我正在创建一个网站，并希望使用响应式设计。我想要做的就是在 <ul> 的右侧（旁边）显示一个无序列表的项目和一个图像，当用户调整页面大小或在移动设备上查看它图像应显示在 <ul> 下方。

我已经尝试更改 display 我的 div 的样式，其中包含 <ul> 和图像，但它仍然无法正常工作：

 <div style="display:table">
  <div style="display:table-cell; vertical-align:top;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div style="display:table-cell;float:right;">
    <img src="Images/Image1.jpg" />
  </div>
</div>

原文由 Denys Wessels 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 flexbox 对齐项目，然后使用媒体查询更改较小屏幕的显示属性（将 320px 更改为断点的任何宽度）。

 .flexcontainer {
  display: flex;
  align-items: center;
}
@media (max-width: 320px) {
  .flexcontainer {
    display: block;
  }
}

 <div class="flexcontainer">
  <div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div>
    <img src="http://lorempixel.com/image_output/nature-q-c-120-120-1.jpg" />
  </div>
</div>

原文由 Aaron 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在列表和图像上使用 float:left ，使图像与列表相邻对齐。

如以下片段所示。

 .container {
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
  box-sizing: border-box;
}
.col-lg-8,
.col-lg-4 {
  float: left;
  padding: 0 15px;
}
@media screen and (min-width: 760px) {
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
}
@media screen and (max-width: 760px) {
  .col-lg-8 {
    width: 100%;
  }
  .col-lg-4 {
    width: 100%;
  }
}

 <div class="container">
  <div class="row">
    <div class="col-lg-8">
      <ul class="list-holder">
        <li>Joey</li>
        <li>Chandler</li>
        <li>Ross</li>
      </ul>
    </div>
    <div class="col-lg-4">
      <div class="image-holder">
        <img src="http://stuffpoint.com/images/stuff-icon/friends.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

REMARKS 直接导入 bootstrap ，用于响应式网页。

原文由 anurag 发布，翻译遵循 CC BY-SA 3.0 许可协议