Question

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

我尝试改变display我的div的样式，其中包含<ul>和图像，但它仍然不起作用：

＆＃13;

<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>

＆＃13;

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>

Answer 2

将float类型添加到ul和img。然后为您ul添加最小长度，即图像在ul下的最大宽度。

＆＃13;

    <ul style="float: left; min-width: 500px; border-right: solid 1px;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <img src="Images/Image1.jpg" style="float: left;" />

＆＃13;

Answer 3

使用以下代码：

代表HTML：

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

for CSS：

.design{
float: left;
}

并摆脱

float: right;

Answer 4

在列表和图片上使用 float：left ，以对齐列表旁边的图片。

如下面的代码段所示。

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

<强>说明直接导入bootstrap，用于响应式网页。

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

4 个答案: