文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >漂浮在其容器分段之外的块

问漂浮在其容器分段之外的块
EN

Stack Overflow用户
提问于 2014-07-16 00:40:08
回答 3查看 101关注 0票数 0

我的网页上有以下问题：

​

正如您所看到的，内部div项浮动在它们的容器之外。我在这里看到了一些关于使用

代码语言：javascript
复制
display:inline-block;

我尝试了几个变种，但没有成功。如果我在#容器和#itemWrapper上都将display设置为inline-block，那么我的边距将在中间面板上丢失，但是如果我在我的图库上将display设置为inline-block，则不会发生任何事情，在这里会有点混乱。

HTML：

代码语言：javascript
复制
<body>

    <div id="wrapper">

        <section id="header">

            <div class="logo">

                <h1 id="logoText">Dope Clothing</h1>

            </div>

        </section>

        <section id="nav">

            <div id="nav-wrapper">

                <ul id="nav-list">

                    <li id="nav-home"><a href="">Home</a>
                    </li>
                    <li id="nav-brands"><a href="">Brands</a>
                        <ul id="brands-list">
                            <li><a href="">Brand01</a>
                            </li>
                            <li><a href="">Brand02</a>
                            </li>
                            <li><a href="">Brand03</a>
                            </li>
                            <li><a href="">Brand04</a>
                            </li>
                            <li><a href="">Brand05</a>
                            </li>
                        </ul>
                    </li>
                    <li id="nav-about"><a href="">About Us</a>
                    </li>
                    <li id="nav-contact"><a href="">Contact Us</a>
                    </li>

                </ul>

            </div>

        </section>

        <section id="main">

            <div id="content">

                <div id="gallery">

                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>
                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>
                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>
                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>
                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>
                    <div class="itemWrapper">
                        <div class="pictureWrapper"><img class="itemPicture" src="Images/Clothing/green.png"/></div>
                        <div class="itemDetails">
                            <div class="itemTitle">Naartjie Fresh</div>
                            <div class="itemPrice">R150.00</div>
                        </div>
                    </div>

                </div>

            </div>

            <aside id="share-wrapper">
                <div id="sharebutton">></div>

                <div id="share">
                    <div class="share-box"><div class="facebook-share">f</div></div>
                    <div class="share-box"><div class="twitter-share">t</div></div>
                    <div class="share-box"><div class="google-share">g</div></div>
                    <div class="share-box"><div class="insta-share">i</div></div>
                </div>

            </aside>

        </section>

CSS：

代码语言：javascript
复制
* { margin:0; padding:0; }

#header,
#footer {
    background-color: #000000;
}

#header { padding-top:50px; padding-left:50px; padding-bottom:20px; }

#logoText { color:#FFFFFF; font-size:54px; }

#nav-wrapper { padding-top:40px; text-align:center; }

#nav-list { display:inline; }

#nav-list li { display:inline-block; margin-right:30px; padding-right:30px; }

#nav-list li a { text-decoration:none; color:black; font-size:20px; }

#nav-list li a:hover { color:#CECECE;}

#nav-home, #nav-brands, #nav-about { border-right:thin solid black; }

#nav-brands { position:relative; }

#nav-list li:hover ul { display: block; opacity: 1; visibility: visible; }

#brands-list { padding: 10px 0px 0px 0px; position: absolute; top: 20px; left: -35px; width: 120px; box-shadow: none; display: none; opacity: 0;
               visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s;
               -o-transition: opacity 0.2s; -transition: opacity 0.2s; border:thin solid #000000; border-radius:0px 0px 5px 5px;
               border-top:0px;
}

#brands-list li { display: block; margin:0px 0px 5px 0px; padding:0px 0px 5px 0px; text-align:center; border-bottom:thin solid #CECECE;

}

#brands-list li:hover {}

#brands-list li:last-child { border-bottom:0px; }

#content {
    width:1080px;
    margin:10px auto;
    border-left:thin groove #333;
}

#share-wrapper {
    float:left;
    width:40px;
    height:180px;
}

#share {
    border:thin solid #333;
    border-left:0px;
    border-radius:0px 6px 6px 0px;
    width:30px;
    padding:0px 5px;
    height:170px;
}

#sharebutton {
    color:#eeeeee;
    height:20px;
    width:30px;
    text-align:center;
    line-height:20px;
}

.share-box,
.share-box img {
    width:30px;
    height:30px;
}

.facebook-share,
.twitter-share,
.google-share,
.insta-share { width: 100%; height: 100%; line-height: 30px; text-align: center; color:#333; border:thin solid #333; border-radius:15px; margin:10px 0px; background-color:#eee;}

.facebook-share:hover,
.twitter-share:hover,
.google-share:hover,
.insta-share:hover { background-color:#333; color:#eee; }

.share-box img {

}

#content { margin:0px auto; max-width:1080px; border:0px;}

.itemWrapper { max-width:280px; float:left; margin:10px;}

.itemPicture { max-height:280px; max-width:280px; }

.itemTitle { text-align: center; font-size: 24px; font-weight: bold; }

.itemPrice { text-align: center; font-size: 18px; font-weight: bold; }

#footer { color:#cecece; padding:20px;}

#facebook { width:20px; height:20px; text-align:center; border-radius:10px; border:1px solid #cecece; }

编辑：

好的，将display:inline-block添加到我的#gallery div中而不在项目包装上添加inline-block似乎起到了作用，但是我仍然不能让share框出现在边上?？

html
css
EN

回答 3

Stack Overflow用户

发布于 2014-07-16 00:52:09

在项目具有浮点值的层内创建一个空白div并应用：

代码语言：javascript
复制
clear: both;
票数 0
EN

Stack Overflow用户

发布于 2014-07-16 00:57:13

您需要清除浮点数或将它们包含在块格式化上下文中。

如果添加以下CSS规则：

代码语言：javascript
复制
#gallery {
    overflow: auto;
}

您将触发一个新的块格式化上下文，并且浮动元素的边缘将不会干扰/干涉其余布局元素。

注意:你也可以使用overflow: hidden，两者都可以工作，我只是更喜欢auto的值。

票数 0
EN

Stack Overflow用户

发布于 2014-07-16 00:57:30

尝试向<div id="content">添加overflow:hidden;

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/24763659

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档