Question

我想创建一个简单聊天的网页，一个用于消息的大框架，一个用户列表的更智能的框架（在右侧）和一个用户可以在第二个第一帧下面撰写消息的行。 / p>

我已经创建了3个框架而没有任何问题，但我的问题是我无法找到如何使contactbox框架占据整个左侧空间。如果我将宽度设置为％，则它位于消息帧下面。有人可以帮我吗？

HTML

<div id="content">
<section id="mainframe">
    <article id="messagebox">
        <p>User1 : Message 1</p>
        <p>User1 : Message 2</p>
    </article>
    <aside id="contactbox">
        <p>User1</p>
    </aside>
    <aside id="composebox">
        <p>I'll write my message here</p>
    </aside>
</section>
</div>

CSS

body{
    margin: 0;
    padding: 0;
}

#mainframe{
    border: 1px solid white;
    margin: 0 10px 0 10px;
}

#mainframe p{
    margin: 0;
}

#mainframe #messagebox{
    display: inline-block;
    width: 85%;
    min-width: 250px;
    border-right: 1px solid white;
    padding: 0;
    vertical-align: bottom;
    min-height: 500px;
}

#mainframe #contactbox{
    display: inline-block;
    width: 15%;
    min-width: 150px;
    vertical-align: top;
    padding: 0;
    min-height: 500px;
    text-align: right;
}

#mainframe #composebox{
    border-top: 1px solid white;
    display: inline-block;
    width: 100%;
    min-width: 400px;
    padding: 0;
    min-height: 30px;
    height: 30px;
    text-align: left;
}

这是 JSFiddle ，并在容器中添加了一些颜色，因此更容易看出错误。

Answer 1

有两件事会使联络箱破坏到下一行：

默认情况下，内容框模型用于调整大小。这意味着，width指定实际内容的可用宽度，并将填充和边框添加到其中。所以，你的#messagebox实际上是85％+ 2px宽。您可以通过为box-sizing: border-box;和#messagebox声明#contactbox来解决此问题，以便浏览器使用声明的width作为整个框的大小。
两个盒子之间有空白区域，增加了额外的空间。一个简单的解决方法是将它们评论出来。

这是一个小提琴，应该按预期工作：http://jsfiddle.net/k193m66e/

如果您关心不支持box-sizing的旧浏览器，您还可以尝试基于float的布局。

Answer 2

如果您想将元素并排放置在网页上，有助于了解the float property。通过应用此属性，您可以告诉元素“浮动”到页面的右侧或左侧。其他内容将包围它。我在下面给出了一个简单的示例，其中messagebox占据了左侧页面的85％，contactbox占据了右边15％的列，composebox 1}}填写100％的页面。

HTML未更改，这是CSS：

#messagebox {
    float:left;
    width:85%;
}
#contactbox {
    float:right;
    width:15%;
}
#composebox {
    clear:both;
}

您可以看到实时演示here。我添加了填充文本，以便您可以看到填充内容时列的正确包装方式。

clear:both属性基本上表示“在浮动元素之后才显示此内容。”

Answer 3

虽然问题已经回答，但您仍然可以尝试这个问题。它的解决方案更为简单。

<强> CSS

#contactbox
{
width:20%;
float:left;
}
#mainframe
{
width:80%;
float:left;
min-height:500px;
}

<强> HTML

<div id="mainframe">
    <p>User1 : Message 1</p>
    <p>User1 : Message 2</p>
</div>
<div id="contactbox">
    <p>User1</p>
</div>
<div style="clear:both"></div>
<div id="composebox">
I'll write my message here.
</div>

<强> DEMO

css内联块元素定位

3 个答案: