html - 漂浮在容器 Div 之外的 block-6ren

html - 漂浮在容器 Div 之外的 block

转载作者：行者123 更新时间：2023-11-28 09:59:37

我的网页出现以下问题: enter image description here

如您所见，内部 div 元素漂浮在其容器之外。我在这里看到了一些关于使用

display:inline-block;

我尝试了一些变体，但没有成功。如果我在我的#container 和我的#itemWrapper 上都将显示设置为内联 block ，那么我的中心面板上的边距就会丢失，但是如果我在我的画廊上将显示设置为内联 block ，那么什么也不会发生，这里有点困惑。

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 似乎可以解决问题，但是我似乎仍然无法让共享框出现在旁边 ??

最佳答案

在元素具有浮点值的层内创建一个空白 div 并应用:

clear: both;

关于html - 漂浮在容器 Div 之外的 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24763659/

文章推荐： javascript - 来自压缩文件的动态字体？

文章推荐： php - 在ajax、php中显示加载百分比的进度条

文章推荐： javascript - 这些脚本之间的效率有差异吗？

文章推荐： html - 子 div 根本没有出现。出现 div 中的文本

Qt布局 child 漂浮
我有一个空的水平布局，我动态地填充了三个 child 。这是一个纸牌游戏，因此此布局会动态填充具有图像集的 QLabel 子项。当我点击一张卡片来播放它并将其移动到屏幕中央时，我希望其他卡片的位置保持
android - 漂浮 fragment
我正在尝试通过膨胀并使用 FragmentTransaction 将其添加到 Activity 来动态创建一个 float Fragment。当我将它添加到容器(添加到我在容器中为它创建的 Fram
html - 导航栏 |显示 flex |漂浮？
这个问题在这里已经有了答案: CSS3 Flex: Pull child to the right (1 个回答) 关闭 5 年前。
html - 为什么我的父类必须 float 如果 child 漂浮
我的应用程序有 1 个父框和 2 个子框 (divs)。此时，子框出现在彼此下方 This is b This is c .a{border:solid;width:30
ios - 可选原始类型的字符串初始值设定项 : Int? Double？漂浮？ ETC
是否可以在不单独指定每种类型的情况下对所有上述类型进行扩展？例如，这是Double的扩展: extension String { init?(_ value: Double?) { if
java - 哦，不，不再 - 比较两碗矮牵牛 - 对不起 - 漂浮，为了平等
Due to rounding errors, most floating-point numbers end up being slightly imprecise. https://www.flo

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 漂浮在容器 Div 之外的 block