Question

我正把头发拉出来。我只想要两个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>

我似乎已经尝试了一切！

Answer 1

申请word-wrap：

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

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

Answer 2

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

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

Answer 3

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

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

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

非常基本的HTML格式

3 个答案: