程序设计 css-float

4

在CSS中，将overflow:hidden其设置在父容器上，以使其随其浮动子容器的高度扩展。但是，当与margin: auto...结合使用时，它还具有另一个有趣的功能。如果PREVIOUS兄弟姐妹是一个浮动元素，它将实际上并列出现。也就是说，如果同属float:left容器，float:none overflow:hidden则带有的容器将出现在同属容器的右侧，没有换行符-就像它在正常流中浮动一样。如果先前的兄弟是，float:right则容器将出现在兄弟的左侧。调整此容器的大小将准确地显示其在浮动元素之间居中的位置。说，如果你有两个以前的兄弟姐妹，一个float:left其他float:right，容器将出现在中心插图中的两项。所以这是问题所在... 如何在不遮盖孩子的情况下保持那种布局？在整个网络上进行谷歌搜索为我提供了如何clear:both扩展和扩展容器的方法...但是我找不到任何其他解决方案来保持左/右前一个孩子居中。如果您制作容器，overflow:visible则容器会突然忽略浮动元素的布局流程，而是分层显示在浮动元素的顶部。所以问题：我必须有一个容器overflow:hidden来保留布局... 我怎样才能做到不让孩子蒙面？我需要让孩子相对于容器外部的父对象绝对定位。要么我如何overflow:visible才能绝对地将一个孩子相对于其父对象放置在容器之外...还可以保留同级的float-like-layout-flow？

100 css overflow css-float center hidden

9

如何停止向左浮动？

我有以下代码： <div style="float: left; width: 100%;"> <label style="float: left;">ABC</label> <input style="float: left; font-size: 0.5em;" type="button" onclick="addTiny(0,'Question_Text'); return false;" value="&#x25BC;" title="Editor" /> <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" /> <div class="adm"> <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor"> abc </textarea> </div> </div> 我的问题是类adm的div浮动到左侧，因此与label和两个输入按钮位于同一行。有什么方法可以使我从浮动转变呢？

98 css html css-float

7

使外部div自动与其浮动内容的高度相同

我想要div黑色的外部包裹它div的浮动。我不想使用style='height: 200px中div与outerdivID，因为我希望它自动将其内容的高度（例如，浮动div或多个）。 <div id='outerdiv' style='border: 1px solid black;background-color: black;'> <div style='width=300px;border: red 1px dashed;float: left;'> <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> </div> <div style='width=300px;border: red 1px dashed;float: right;'> <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> </div> 如何实现呢？

94 css html css-float

14

使用CSS将Div分成2列

我一直在尝试使用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的背景色。我从各种网站尝试过的其他代码似乎无法转换为我的结构。谢谢你的帮助！

89 css html css-float

6

CSS停止图像下的文字换行

我有以下标记： <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 …

86 css css-float word-wrap

6

停止将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> 运行代码段隐藏结果展开摘要目前，我实际上很难将行的宽度编码为一个很大的数字。

84 html css-float word-wrap

7

如何在不更改HTML的情况下在同一行上对齐两个元素

我在同一行上有两个元素向左浮动和向右浮动。 <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完美地对齐（我不能只应用右边距并将其移到上方）。我也无法更改标记。是否有统一的方法将它们排列在一起？我尝试使用百分比对边距进行右对齐，对元素1进行负边距处理以使元素2更近（但无法使其正常工作）。

84 html css css-float margin

11

如何使一个div包裹两个浮动div里面？

我不知道这是否是常见问题，但到目前为止，我在网络上找不到解决方案。我想将两个div包裹在另一个div中，但是其中的两个div必须对齐同一级别（例如：左边一个包裹了wrapdDiv的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%; …

76 css layout html css-float

8

边距顶端不起作用：

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> 运行代码段隐藏结果展开摘要为什么margin:top“主数据”在上面的代码中不起作用？

74 css css-float

15

如何使用CSS制作浮顶？

我知道CSS仅支持float属性的left和right值，但是有没有一种技术可以实现float top？我会尽力解释。我有以下代码： <div style="float:left"> <div style="float:left"> <div style="float:left"> .... 使用此代码，每个div都会向左浮动，直到达到页面的右侧限制。我想垂直做同样的事情，以便将每个div放在上一个div的底部，然后在达到页面的底部限制时创建一个新列。有没有一种方法可以仅使用CSS（甚至可以编辑HTML代码）来做到这一点？

68 html css css-float

Questions tagged «css-float»