gpt4 book ai didi

css - 如何使CSS列不被强制向下

转载 作者:行者123 更新时间:2023-11-27 22:39:27 24 4
gpt4 key购买 nike

在下面的示例中,您如何 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;
}

最佳答案

pegasus4747说,使用<ol>编号标签

如果你想要#right占用 250px 和 #left填补其余的做这个

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

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

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

关于css - 如何使CSS列不被强制向下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1144690/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com