Question

我的网页上存在以下问题： enter image description here

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

的线程

display:inline-block;

我尝试了一些变化，但没有运气。如果我在我的#container和我的#itemWrapper上将显示设置为内联块，那么我的边距会在我的中心面板上丢失，但是如果我在我的库中将显示设置为内联块，那么没有任何反应，这里有点困惑。

HTML：

<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：

* { 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而没有item-wrapper上的inline-block似乎可以解决这个问题，但是我似乎仍然无法让分享框出现在一边？ / p>

Answer 1

在图层中创建一个空白div，其中项目具有浮点值并应用：

clear: both;

Answer 2

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

如果添加以下CSS规则：

#gallery {
    overflow: auto;
}

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

注意：您也可以使用overflow: hidden，两者都有效，我更喜欢auto值。

Answer 3

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

在Container Div之外漂浮的块

3 个答案: