标签: css-float

好吧，这很难解释。我有一个带有两个可折叠菜单的页面。其中一个绝对位于左上角。当我折叠它时，剩余的内容都被压缩到左上角，正如预期的那样。

另一个菜单绝对位于右下角。当它展开时（加载页面时的默认状态），它位于右下角，距离底部和右侧 5 个像素，如预期的那样。然而，当我折叠它时，突然剩余的内容从距底部和右侧 5 个像素的地方开始，然后从页面向右和向下流动，扩展页面并导致滚动条。

所需的行为是将剩余内容压缩到页面的右下角，而不更改页面尺寸。

发布我的代码会很棘手，因为其中很多代码是通过 JavaScript 动态生成的。

每个菜单由容器 div 内的两个子 div 组成。容器 div 是绝对定位的（左上角或右下角，取决于哪个菜单）。第一个子 div 是活动菜单选项卡的内容，向左浮动，顶部边距刚好足够高，可以将其放在菜单选项卡下方。第二个子 div 是菜单选项卡。该 div 是绝对定位的（以便让内容 div 在其后面流动）。选项卡 div 内的每个选项卡都向左浮动，因此我可以动态添加更多选项卡。

其中一个选项卡始终是“隐藏/显示”选项卡，基本上只是在菜单的内容 div 上切换显示：隐藏。

因此，据我了解，浮动内容 div 以某种方式阻止菜单从页面流出，并且当它“折叠”（即隐藏）时，没有任何东西可以阻止绝对定位的选项卡 div 从页面流出。

我想我会尝试将有问题的 div 和 css 代码删除到它自己的页面中，这样我就可以隔离行为，并发布一些连贯的代码。同时，任何建议都是非常受欢迎的。

谢谢！== 马特

PS 通常情况下，我会将菜单中的所有内容相对定位。我在浮动内容 div 顶部使用绝对定位的 div 的原因是这样我可以控制活动选项卡的底部是否看起来“连接”到内容 div。如果我有两个相对的 div，并且只是将选项卡 div 放在内容 div 的顶部，则我无法在正确的位置删除内容 div 的黑色顶部边框，使其看起来像是活动选项卡已连接到它。如果有人能想出一种方法来解决这个问题，同时仍然保持两个 div 的相对性，我也会对此感到失望。

我没有发布图片的代表，所以这里有一些链接：

这是菜单展开后的样子： http ://theroach.net/igp_menutest/css_menus1.png

它们在这里折叠起来： http://theroach.net/igp_menutest/css_menus2.png

这就是我想要的： http://theroach.net/igp_menutest/css_menus3.png

更新：我已经尽可能地从 JavaScript 中删除了菜单代码。这是带有工作代码的JSFiddle 。由于某种原因，onclick 事件在 JSFiddle 中不起作用，但它与我的测试页中的代码完全相同，因此如果您无法让它在 JSFiddle 中工作，请尝试此链接以查看行为。仅供参考，JavaScript …

我有一个容器 div，其中的内容有时需要除以class="top"和class="bottom"。显然没有float:topor float:bottom，那么单独使用 html/css 实现这一目标的最佳方法是什么？

前任：

<div class="content">
        <div class="left">
            <a href="#"><img src="img/home.jpg" alt="salon home"></a>
        </div><!-- end left -->
        <div class="center">
            <a href="#" class="top"><img src="img/about.jpg" alt="about salon"></a>
            <a href="#" class="bottom"><img src="img/services.jpg" alt="salon service"></a>
        </div><!-- end center -->
        <div class="right">
            <a href="#" class="top"><img src="img/products.jpg" alt="salon products"></a>
            <a href="#" class="bottom"><img src="img/contact.jpg" alt="contact salon"></a>
        </div><!-- end right -->
    </div><!-- end content -->

#container .content {
    margin-top: 115px;
}

#container .content .left {
    float: left;
    width: 307px; …

我认为我的浮标有问题，它们没有正确对齐，我觉得这与我设置盒子的方式有关。我尝试过更改左右边距的对齐方式，但没有得到所需的外观，我希望将其全部排列起来。这是html和css。

超文本标记语言

<div id="service1">
    <center>
    <h1>Savings <br />Strategies</h1>
    <img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service2">
    <center>
    <h1>Vendor <br />Management</h1>
    <img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service3">
    <center>
    <h1>Environmental<br /> Stewardship</h1>
    <img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

CSS

#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}

#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}

#service3 {
float:right;
width:360px;
height:280px;
padding 15px; 
}

提前致谢！

我这里有我的 CSS 代码。我的问题是，当内容有很多东西时，它会将其高度调整为大于导航高度。我想要的是当这个浮动高度调整之一时，它也包括另一个。

<div id="main">   
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS代码如下：

#main{
    width: 960px;
    height: 500px;
    margin: auto;
}
#navigation{
    float: left;
    width: 200px;
    background-color: #C7E1BA;
}
#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
}
#content, #navigation {
    height: 100%;

}
#footer{
    clear: both;
    width: 960px;
    height: 100px;
    background-color: #628B61;
    margin: auto;
}

如何在不将左侧的文本向下推的情况下，将 2 个图像向右浮动并直接放在彼此下方？

当我想将两个元素彼此相邻放置时，就像这样

<div class="wrapper">
    <div class="left"> ... </div>
    <div class="right"> ... </div>
</div>

我可以使用以下CSS：

.left, .right {
    display:inline;
    float:left;
}

但如何让包装器在没有clear:both属性的情况下调整其高度以适应子元素？

我已经到了这样的状态：

HTML

<div class="outer clearfix">
    <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

CSS

.clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .outer {
        background: #ccc;
    }
    .outer div {
        border-right: 1px solid red;
        float: left;
        padding: 10px;
        width: 100px;
    } …

我怎样才能并排制作 3 个 div。其中 div1 将在最左侧，div3 将在最右侧，而 div2 在中间。

我知道这可以通过 display:flex 和 justify-content:space-between 来完成，但我正在寻找一种没有 flex 的方法。

这是我的方法，但无法成功实现。

我试图让所有 div 的 display:inline-block 和 float:left 和 float:right 到两个极端的 div 和中间一个我尝试了 margin:auto，但看起来它不尊重它

请帮忙

.container {
  border: 1px solid;
}
.container div {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
}
#div1 {
  float: left;
}
#div3 {
  float: right;
}
#div2 {
  margin: auto;
}

<div class="container">

  <div id="div1"></div>
  <div id="div2">he</div>

  <div id="div3"></div>
</div>

我的页脚有问题：我想要在 div 行内有 3 个居中的列。这是代码。

.col-1 {
    float: left;
    width: 20%;
    padding: 5px;
    height: 100px;
}

.col-2 {
    float: left;
    width: 40%;
    padding: 5px;
    height: 100px;
}

<footer>
    <div class="row bg-black">
        <div class="col-2">
            <div class="social-box">
                <div><p>Connect with us:</p></div>
                <div>
                    <div><img src="assets/twitter.png" alt=""></div>
                    <div><img src="assets/linkedin.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="col-1">
            <p>dsds</p>
        </div>
        <div class="col-1">
            <p>dsds</p>
        </div>
    </div>

    <div class="row"></div>
</footer> <!-- END FOOTER -->

如果我把float: left柱子放在上面，我的背景就不会显得黑色。

我怎么解决这个问题？它也不适用于 Flex。

为什么说display浮动元素的属性可能会变成块级，而不是说inline-block，因为它根据它包裹的内容开始占用空间？