标签: css-float

对于我的生活,我无法弄清楚这一点.我有一个特定宽度的容器div.里面有几个孩子.我希望最后一个div扩展其宽度以填充容器中剩余的剩余宽度.我怎样才能做到这一点？

这是一个例子(也在http://jsfiddle.net/nbKAr/):

#container {
    width:200px;
    border: 1px solid red;
}
    
#container div {
    float:left;
    border: 1px solid black;
}

<div id="container">
    <div>a</div>
    <div>b</div>
    <div id="expandMe">expand me</div>
</div>

假设带有"a"和"b"的div组合总宽度为50px.如何在不使用JavaScript的情况下制作#expandMe 150px？

我在另一个div中有一个左浮动的div,并且浮动的div内容已经离开了父级.

看到现场:

http://jsfiddle.net/eWkUg/

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  width: 600px;
}
ul li {
  border: solid 1px #000;
  margin: 15px 0;
}
.img-section {
  float: left;
  border: solid 1px red;
}

<ul>
  <li>
    <div class="img-section">
      <img src="http://www.placehold.it/50X100">
    </div>
     Hello world
  </li>
  <li>
    How to avoid the red box getting out of the black one? (and hiding another list element)
  </li>
</ul>

我一直在尝试清楚:左/右/两者,但没有任何帮助.

怎么避免这个？由于图像叠加,我必须浮动整个div(不是内容)(不包括在上面的例子中)

我有一堆块我向左浮动.它们的高度各不相同; 有些短,有些高.

现在,这些块是动态生成的,因此无法预测每个块的高度(或者有多少块).但是,需要灵活,所以如果这些块不能完全适合一行,那么我需要第二行.

问题:由于块的高度不同,任何溢出到下一行的块都会"嵌套"在现有的浮点数中:

我需要溢出块来形成自己的行:

我知道这是正确的行为(浮动支持更高的位置而不是左边的位置),但对此最好的解决方案是什么？我可以改变HTML结构(显然任何CSS),但我不能硬编码clear: left.

这是一个jsFiddle.

我在表中浮动头有问题.我的标题应该是colspan="2"但当我设置float:left为td元素"标题"时,colspan停止工作.我想要这样的东西:

+-------------------------------------------------+
|Header headher header header                     |
+-------------------------------------------------+
|Something     | Something                        |
+-------------------------------------------------+

但我明白了:

我的代码:

<table border="1">
    <thead>
        <tr>
            <th colspan="2" style="float: left;">Header header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Something</td>
            <td>Something</td>
        </tr>


    </tbody>
</table>

我在Bootstrap中使用了3列布局,右侧是导航,内容和小部件,但是当屏幕处于移动视图时,希望布局如下所示进行堆叠; 导航小部件然后内容,请指教.

查看所需桌面和移动布局顺序的图像:

目前,一个div浮动 - 我的问题是为什么两个div重叠,即使每个div都设置了尺寸？我怎样才能解决这个问题？

HTML:

 <div class="wrapper">
    <div class="block1">
    </div>
    <div class="block2">
    </div>
 </div>

我的CSS:

.wrapper {border:black solid;width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;border:solid green;}

jsfiddle在这里 - http://jsfiddle.net/FLwUA/1/

我有这个元素:

<div class="menubar">
    <a href="http://home.com"><img src="../img/home_button.png"/></a>
    <a href="http://home.com/a"><img src="../img/a_button.png"/></a>
    <a href="http://home.com/b"><img src="../img/b_button.png"/></a>
    <a href="http://home.com/c"><img src="../img/c_button.png"/></a>
</div>

我的目标是让菜单栏div的内容居中.

使用display: table;并margin:auto;实现,但我正在使用的背景图像被裁剪为仅适合div的内容:

.menubar {
    display: table;
    margin: auto;
    background-image:url(/img/menubar_background.png);
}

那么,我有另一个版本,两侧都增加了50%的填充,但问题是结果的总宽度是100%+按钮的宽度.

.menubar {
    padding-right:50%;
    padding-left:50%;
    background-image:url(/img/menubar_background.png);
}

我通过使用max-width:960px(100%)来实现更接近的东西,但仍然存在一个问题:它实际上并没有向两侧应用相同数量的填充.它最终向左填充50%,向左到达960px向右填充.

欢迎任何帮助!

我发布了以下javascript代码作为fiddle.这是非常基本的,在IE11和Chrome中运行良好,但FireFox悄然抛弃了我的float设置.当我使用FireBug检查元素时,它们都没有float设置它们的样式.

为什么？

浏览网页时,我得到的模糊印象是它与width需要设置的地方有关,但在哪里？如果这是问题,我有没有办法在Firefox中执行此操作而不知道容器的宽度？

var titleElem = document.createElement("div");
    titleElem.innerHTML = "Testing";
    titleElem.setAttribute("unselectable", "on");
    titleElem.style.border = "0px transparent";
    titleElem.style.width = "auto";
    titleElem.style.float = "left";
    titleElem.style.whiteSpace = "nowrap";
    titleElem.style.overflow = "hidden";
    titleElem.style.position = "relative";

document.body.appendChild(titleElem);

    rangeElem = document.createElement("div");
    rangeElem.setAttribute("unselectable", "on");
    rangeElem.style.width = "auto";
    rangeElem.style.border = "0px transparent";
    rangeElem.style.float = "right";
    rangeElem.style.whiteSpace = "nowrap";
    rangeElem.style.overflow = "hidden";
    rangeElem.style.position = "relative";
    rangeElem.style.fontSize = "x-small";
    rangeElem.style.paddingRight = "5px";
    rangeElem.className = "rangeDiv";
    rangeElem.innerHTML = "<i>[1234 - 5678]</i>";

document.body.appendChild(rangeElem);

我试图覆盖overflowcss属性.此值在我包含的外部文件中设置如下.

#bodyWrapper {
    overflow: hidden;
}

我尝试通过在内联样式标记中设置它来覆盖此值style="overflow:none",但这没有任何效果.

我试图用jquery覆盖$("#bodyWrapper").css("overflow", "none"),但仍然没有效果.

这是截图导致的.当我overflow:hidden从萤火虫中取出时,它按预期工作.

这是jsFiddle有这个问题.http://jsfiddle.net/HZUeF/4/

在第一个下拉列表中选择两个选项,然后尝试在下面的下拉列表中选择一个选项.

我有一个项目列表,并在一些项目的末尾我想添加一个图标(或其中几个 - 它是动态的).Items的容器有一个固定的宽度,如果item的文本大小太大 - 我想添加省略号.
所以问题是在文本旁边添加了图标,如果文本很长 - 图标会移出容器.所有项目的模板必须相同.
注意:并非所有项目都有图标,而某些图标可能包含多个图标.
注2: javascript解决方案不适用,想在纯CSS中制作它.

实际:

预期:

任何帮助深表感谢.

body {
  font-size: 20px;
}

.container {
  width: 150px;
  background: #ff0;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.container li {
  border-bottom: 1px solid #000;
}

.item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon {
  background: #0f0;
}

<ul class="container">
  <li>
    <div class="item">
      <span class="text">Text 1</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li>
    <div class="item">
      <span class="text">Text 2 Text 2</span>
      <span class="icon">12</span>
    </div>
  </li>
  <li> …