Question

在下面的例子中你如何1）使文本“这是第二个条目...”换行并没有.entry div强行关闭和2）你如何使#right div不被强制下来？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Test</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
    <div id="left">
        <div class="submissions">
            <div class="numbering">1</div>
            <div class="entry">This is the first entry.</div>
        </div>
        <div class="submissions">
        <div class="numbering">2</div>
            <div class="entry">This is the second entry. This is the second entry. This is the second entry. This is the second entry. 
            This is the second entry. This is the second entry. This is the second entry. This is the second entry. This is the second entry. This is the second entry.</div>
        </div>
        <div class="submissions">
            <div class="numbering">3</div>
            <div class="entry">This is the third entry.</div>
        </div>
    </div>
    <div id="right">Google ad
    </div>
</div>
</body>
</html>
body {
}
#wrapper
{
}
#left
{
    float: left;
    border-color: Green;
    border-style: solid;
    border-width: 1px;
}
.submissions
{
    clear: both;
    font-size: large;
    font-family: Arial;
}
.numbering
{
    width: 100px;
    float: left;
    border-color: Gray;
    border-style: solid;
    border-width: 1px;
}
.entry
{
    float: left;
    border-color: Olive;
    border-style: solid;
    border-width: 1px;
}
#right
{
    width: 250px;
    float: right;
    border-color: Blue;
    border-style: solid;
    border-width: 1px;
}

Answer 1

如pegasus4747所述，请使用<ol>标记进行编号

如果您希望#right占用250px而#left填补其余部分，请执行此操作

#left {
padding-right: 250px;
margin: 0;
padding: 0;
}

#right {
width: 250px;
margin-left: -250px;
margin: 0;
padding: 0;
}

负边距将使#right不会下降，即使屏幕尺寸发生变化。

Answer 2

尝试给你的输入div一个宽度。

对于Google广告，包装器和添加都需要浮动，或者需要显示：inline-block;

Answer 3

1）将.numbering和.entry div向左浮动并为两者设置宽度。 2）设置#left div的宽度。

但是，我建议您使用<ol>代替div，如下所示：

<ol>
  <li>This is the first entry</li>
  <li>This is the second entry</li>
</ol>

这为您提供了自动编号。

如何使CSS列不被强制关闭

3 个答案: