我一直在尝试使用CSS将div拆分为两列,但我还没有设法让它工作.我的基本结构如下:
<div id="content">
<div id="left">
<div id="object1"></div>
<div id="object2"></div>
</div>
<div id="right">
<div id="object3"></div>
<div id="object4"></div>
</div>
</div>
如果我试图将右边和左边的div移动到它们各自的位置(右边和左边),它似乎忽略了内容div的背景颜色.我从各种网站尝试的其他代码似乎无法转换为我的结构.
谢谢你的帮助!
我希望有一行div(单元格),如果浏览器太窄而不适合它们,则不会换行.
我搜索过Stack,找不到我认为应该是一个简单的CSS问题的工作答案.
单元格具有指定的宽度.但是我不想指定行的宽度,宽度应该自动为其子单元格的宽度.
如果视口太窄而无法容纳行,则div应该溢出滚动条.
请提供您的答案作为工作代码片段,因为我已经尝试了很多我在其他地方看到的解决方案(比如指定宽度:100%并且它们似乎不起作用).
我正在寻找一个HTML/CSS唯一的解决方案,没有JavaScript.
.row {
float: left;
border: 1px solid yellow;
width: 100%;
overflow: auto;
}
.cell {
float: left;
border: 1px solid red;
width: 200px;
height: 100px;
}<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell">c</div>
</div>目前,我实际上将行的宽度编码为一个非常大的数字.
我有以下标记:
<li id="CN2787">
<img class="fav_star" src="images/fav.png">
<span>Text, text and more text</span>
</li>
我想要它,这样如果文本换行,它就不会进入图像的"列".我知道我可以用table(我正在做的)这样做但是由于这个原因这是不可行的.
我试过以下但没有成功:
li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}
我也试过了float: right.
谢谢.
编辑:我希望它看起来像这样:
IMG Text starts here and keeps going... and
wrap starts here.
不是这样的:
IMG Text starts here and keeps going... and
wrap starts in the space left for the image.
我有两个元素在同一条线上向左浮动并向右浮动.
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
我需要element2在element1旁边排队,两者之间有大约10个像素的填充.问题是element2的宽度可能会根据内容和浏览器(字体大小等)而改变,因此它并不总是与element1完美排列(我不能只应用margin-right并将其移动).
我也无法改变标记.
是否有统一的方式排列它们？我尝试了一个百分比的margin-right,我在element1上尝试了一个负余量来使element2更接近(但是无法让它工作).
我不知道这是否是一个常见的问题,但到目前为止我无法在网络上找到解决方案.我想在另一个div中包含两个div,但是这里面的两个div必须对齐相同的级别(例如:left one占用wrappedDiv的20%宽度,右边一个占80%).为了达到这个目的,我使用了以下示例CSS.但是,现在换行DIV并没有包装所有div.包裹Div的高度小于内部包含的两个div.我怎么能确保包装Div具有最大的高度作为包含的div？谢谢!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>liquid test</title>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
height:100%;
}
#nav
{
float: left;
width: 25%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
margin-left: 1%;
width: 65%;
height: 150px;
background-color: #999;
margin-bottom: 10px;
}
#wrap
{
background-color:#DDD;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<h1>wrap1 </h1>
<div id="nav"></div>
<div id="content"><a href="index.htm">< Back to article</a></div>
</div>
</body> …<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 200px;">Main Data</div>为什么margin:top"主要数据"在上面的代码中不起作用？
我知道CSS只支持float属性的左右值,但有没有一种技术来实现浮动顶部？我会尽力解释.我有以下代码:
<div style="float:left">
<div style="float:left">
<div style="float:left">
....
使用此代码,每个div都会向左浮动,直到达到页面的右边界.我想在垂直方向上做同样的事情,这样每个div都放在前一个div的底部,然后,当达到页面的下限时,会创建一个新列.有没有办法只使用CSS(也许编辑HTML代码)？
如何使div'left'和'right'看起来像列并排？
我知道我可以使用浮动:留在他们身上然后会起作用......但是在这里的第5步和第6步http://www.barelyfitz.com/screencast...s/positioning/ 这家伙说有可能,我不能让它工作......
码:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
每当我尝试在CSS中做一些看似简单的事情时,它都行不通.
我有一个包含460x160图像的内容div.我想要做的就是将图像放在右下角并将文本环绕在它周围.
<div id="contents">
<img src="..." />
text text text text text text ...
</div>
所以我希望它看起来像:
------------------
| text text text |
| text text text |
| text text -----|
| text text | |
------------------
使用左上角或右上角图像进行操作是蛋糕:
#contents img { float:right; }
------------------
| text text | |
| text text -----|
| text text text |
| text text text |
------------------
现在我该怎么把它推到底部？到目前为止,我提出的最好的是:
#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px
------------------
| text …