文字無法適應瀏覽器窗口

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