Question

我正在尝试将左边的几个列表与一些文本对齐，并在桌面/平板电脑和移动设备上展开图像，但似乎没有取得很大进展。

这是Codepen：http://codepen.io/carlos_serrano/pen/ikjeg

这里是我到目前为止的代码：

HTML：

<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>

<div class="linkcontainer">
<div class="linkleft">
    <ul>
        <li><a href="#unique-identifier1">Left Item 1</a></li>
        <li><a href="#unique-identifier2">Left Item 2</a></li>
        <li><a href="#unique-identifier3">Left Item 3</a></li>
      </ul>
</div>
<div class="linkright">
    <ul>
        <li><a href="#unique-identifier1">Right Item 1</a></li>
        <li><a href="#unique-identifier2">Right Item 2</a></li>
        <li><a href="#unique-identifier3">Right Item 3</a></ul>
</div>

这是CSS：

p{
overflow: hidden;
}

img{
float:left;
margin: 0 25px;
}

.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}

.linkleft, .linkright {
width: 100%;
float: right;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
     display: inline-block;
     width: 30%;
     float: left;
    }
}

Answer 1

好的，如果我理解你的问题（并在你的评论中澄清），这就是你需要做的：

首先，将标题和文字移到linkcontainer：

<div class="content">
    <img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>

<div class="linkcontainer">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
    <div class="linkleft">
        <!-- ... -->
    </div>
</div>

然后确保content和linkcontainer都向左浮动：

.content {
    float:left;
    margin:0 25px
}

.linkcontainer {
    float:left;
    padding-bottom: 25px;
}

我更新了您的笔：http://codepen.io/anon/pen/aAiqj

编辑：进一步澄清后，有一个更好的解决方案，有助于防止将标题，文本和菜单包装在较小的屏幕上：确保将2个主要div包装成包装div并设置这一个的宽度与内部div的总和（加上边距）。

#wrapper {
  width: 750px
}
.content {
  float: left;
  margin: 0 25px;
  width: 200px;
}
.linkcontainer {
  float: left;
  padding-bottom: 25px;
  width: 500px;
}

<div id="wrapper">
  <div class="content">
    <img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
  </div>

  <div class="linkcontainer">
      <!-- ... -->
  </div>
</div>

这是您最新的笔：http://codepen.io/anon/pen/hJbmr

保持列表不包围图像

1 个答案: