2

我在这里拉头发。我只希望两个 div 并排包含内容，这些内容根据所有内容可见的内容调整 div 及其包含的 div 的大小，没有滚动。

以下标记不是我的网站，但我编写它是为了展示我想要的内容：

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>

<style>

#outer{
    width:400px;
}

#innerleft{
    width:200px;
    float:left;
}

#innerright{
    width:200px;
    color:#900;
    float:left;
}

</style>

</head>
<body>

<div id="outer">
    <div id="innerleft">
        sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
    </div>
    <div id="innerright">
        dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
    </div>
</div>


</body>
</html>

我似乎已经尝试了一切！

4

3 回答 3

5

申请word-wrap：

#outer > div
{
  word-wrap: break-word;
}

http://jsfiddle.net/NEbj7/1/

于 2012-05-01T15:26:24.280 回答
0

默认情况下，浏览器不会换行其中没有任何空格的文本。要强制浏览器换行，您必须将 word-wrap 属性添加到 #innerleft 和 #innerright

#innerleft, #innerright{
word-wrap: break-word;
}

参考：http ://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

于 2012-05-01T15:52:44.230 回答
0

要使其自动调整大小，您需要添加更多 -- % 百分比以使其自动填充空间

#outer{
    width:100%; /* 100% */
}

#innerleft{
    width:50%; /* 50% */
    float:left;
    word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}

#innerright{
    width:50%;  /* 50% */
    color:#900;
    float:left;
    word-break:break-all;  /* Lines may break between any two characters for non-CJK scripts */
}

http://jsfiddle.net/eZpvr/1/

于 2012-05-01T15:30:29.223 回答