Question

我最近正在尝试使用响应式容器来处理图像，文本和两列列表，并且当我重新调整大小时，似乎无法使文本适应浏览器窗口。如果您对可能发生这种情况的原因有任何疑问，请与我们联系。谢谢！

这是HTML：

<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="maintext">
<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">
    <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></li>
    </ul>
</div>
</div>

CSS：

p {
overflow: hidden;
}

#wrapper {
width:650px
}

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

.maintext {
float:left;
padding-bottom: 25px;
width:500px;
}

.linkleft, .linkright {
display: block;
width: 100%;
}

@media only screen and (min-width: 800px) {
.linkleft, .linkright {
    display: inline-block;
    width: 50%;
    float: left;
    background-color: green;

    }
}

@media only screen and (min-width: 480px) {
.maintext{
    background-color: tomato;
  }
}

这里还有笔的链接：http://codepen.io/carlos_serrano/pen/jrcFu

Answer 1

除非另有说明，否则固定“宽度”将强制div保持该宽度。

使用

max-width: xyz

将允许它扩展到您喜欢的任何值，然后折叠到您的最小宽度。

http://codepen.io/anon/pen/rhFcs

文本无法调整到浏览器窗口

1 个答案: