标签: css-float

    <!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>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

完全没问题.当我使用css语法清除时:在右列中,所有内容 …

html css fluid css-float

Ond*_*rej

2011 07-23

12
推荐指数

1
解决办法

2万
查看次数

如何在div上方和下方进行文本换行？

当元素的顶部对齐时,我没有问题让文本环绕div,但我无法弄清楚如何在div的上方和下方包含文本.

例如,我希望文本为40px的#container的全宽,然后将其环绕到右边,然后再次全宽.

请参阅http://jsfiddle.net/cope360/wZw7T/1/.我在#inset中添加上边距的地方是我要包装文本的地方.这可能吗？

CSS:

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    margin-top: 40px;
}

Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="container">
        <div id="inset">Inset</div>
        This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text …

Run Code Online (Sandbox Code Playgroud)

html css layout css-float

cop*_*360

lucky-day

11
推荐指数

1
解决办法

6465
查看次数

CSS:浮动时忽略div高度

我正在尝试显示一些照片.所有这些都具有相同的宽度但不同的高度.我正在尝试做类似的事情: 正确的形象

每张图片的类名都是pic

<img class = "pic" src = .... />

Run Code Online (Sandbox Code Playgroud)

在样式表中我指定了float:left属性:

.pic{
    float:left
}

Run Code Online (Sandbox Code Playgroud)

最终结果不是预期的结果,而每行在前一行的最高div之后垂直对齐:

有没有办法在纯交叉浏览器CSS中解决我的问题？

html css css-float

Ion*_*nut

2012 07-07

11
推荐指数

1
解决办法

1899
查看次数

使左右浮动重叠而不是堆叠

这比解释更容易显示:http://jsfiddle.net/gN4VZ/

在此输入图像描述

当两者结合超过容器宽度时,是否可以让我的右浮动内容(蓝色)重叠我的左浮动内容(红色)而不是堆叠在它下面？

html css layout css-float

Yar*_*rin

lucky-day

11
推荐指数

1
解决办法

7255
查看次数

没有浮动元素的双列布局？

如何在不使用浮动的情况下并排放置div？我问,因为我读过几次我不应该使用浮点数.或者在这种特殊情况下浮动仍然是定位元素的最佳方式？

css css-float semantics

dev*_*kah

2013 02-21

11
推荐指数

2
解决办法

9606
查看次数

css:防止div宽度扩展到可用宽度

如何防止div扩展？我希望div元素不占用100%的可用空间,并且具有它的孩子所具有的宽度.我需要这个水平居中父div.诀窍是子元素应该共享float:left或diplay:inline-block和fluid width,因此可以有很少行的子元素.

我无法将每一行包装在自己的div中,因为它会破坏响应式设计.

html css css-position css-float

vla*_*lad

lucky-day

11
推荐指数

3
解决办法

2万
查看次数

CSS3显示:table-cell&float？

我有一个长div容器设置为display:table和&divs设置为display:table-cell; vertical-align: middle.

我对垂直对齐的结果非常满意,但是:

我不知道这3个div的宽度,
我希望其中一个位于div容器的右侧(当然减去填充),
float: right不起作用display: table-cell.

这是一个例子(我想将金色div浮动到右边).我不能用JS.如果IE7不可能,我需要它在IE7 +或IE8 +中工作.任何提示/想法？

http://jsfiddle.net/cZ7Th/2/

vertical-alignment css-float css-tables

Wor*_*sor

2017 07-07

11
推荐指数

2
解决办法

3万
查看次数

你能漂浮到跨度的右边吗？

在下面的代码我想要up并down浮动到红线的右边,但它们浮过它到div.

为什么是这样？

#outer {
  margin-top: 50px;
  margin-left: 50px;
  width: 300px;
  border: 1px solid lightgrey;
}

.inner {
  border: 1px solid red;
  padding: 15px 80px 15px 40px;
  position: relative;
}

.up, .down {
  border: 1px solid #000;
  float: right;
}

.down {
  clear: both;
}

Run Code Online (Sandbox Code Playgroud)

<div id="outer">
  <span class="inner">
    <span class="quantity">Quantity</span>
    <span class="up">up</span>
    <span class="down">down</span>
  </span>
</div>

Run Code Online (Sandbox Code Playgroud)

html css css-float

Gue*_*lla

2018 05-08

11
推荐指数

1
解决办法

850
查看次数