堆栈内存溢出
  繁体   English   中英

div定位中的div出现问题

[英]Trouble with div in div positioning

 原文  2014-03-04 05:19:27  7   4    css/ html/ position

问题描述

您可以在此处访问我正在研究的站点。

您可以看到我要做什么。 我希望右下方的框模仿其位置上的右上方的框，但是由于某种原因，它拒绝填充其父div的其余部分，并选择垂直堆叠。 即使没有内容，背景也会在盒子的一半处停止。 我将其设置为向左浮动（这是不必要的，因为div孩子应该自动采用其父母的宽度），所以我猜测实际上那里有东西，但我无法说出什么。 我试图清除，但也没有运气。 有没有一种方法可以使该右下角的div实际填充父div？

这是我的HTML 

 <div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

    <div id="hours">
        <div>
            <p class="titles">Hours</p>
            <p class="subtitles">Lunch</p>
            <p class="subtitles">Dinner</p>
            <p class="subtitles">Bar</p>
        </div>
        <div>
            <p class="hours">Mon-Fri 11-4</p>
            <p class="hours">Mon-Sat 4-12</p>
            <p class="hours">Mon-Sat 4-12</p>
        </div>
    </div><!--end hours-->

还有我的CSS 

/*menu ad*/

div#menu-ad {
    position: relative;
    margin-right: -11px;
    margin-top: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}

.titles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 2.5rem;
    color: #d6832e;
}

#ad {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.6rem;
    line-height: 1.35;
    color: #4f4d4b;
    margin-top: .5rem;
    width: auto;
}

a#button {
    padding: .6rem 1.3rem .6rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}

/*hours*/

div#hours {
    position: relative;
    margin-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
    display: inline-block;
}

.subtitles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}

感谢您的任何帮助或建议！

4 个解决方案

解决方案1
 1 已采纳  2014-03-04 05:56:00

如果您稍微改变一下结构，可能会有所帮助。 与其尝试并排浮动到div，不如将它们像我下面的HTML和CSS那样，将它们结合在一起。 我在更改CSS的地方添加了注释。

HTML 

<div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

        <div id="hours">
        <div>
            <p class="titles">Hours</p>
            <p>
                <span class="subtitles">Lunch</span>
                <span class="hours">Mon-Fri 11-4</span>
            </p>

            <p>
                <span class="subtitles">Dinner</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>

            <p>
                <span class="subtitles">Bar</span>
                <span class="hours">Mon-Sat 4-12</span>
            </p>    
        </div>
    </div><!--end hours-->

CSS： 

/*menu ad*/

div#menu-ad {
    position: relative;
    margin-right: -11px;
    margin-top: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}

.titles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 2.5rem;
    color: #d6832e;
}

#ad {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.6rem;
    line-height: 1.35;
    color: #4f4d4b;
    margin-top: .5rem;
    width: auto;
}

a#button {
    padding: .6rem 1.3rem .6rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}

/*hours*/

div#hours {
    position: relative;
    margin-top: -1px;
    margin-right: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    width: auto;
    height: 150px;
   /***** Removed Display:inline-block *****/
}

.subtitles {
    float:left; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  2rem;
    color: #4f4d4b;
    text-align: left;
    line-height: 2;
}

.hours {
    float:right; /**** Added ****/
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size:  1.7rem;
    color: #4f4d4b;
    text-align: right;
    line-height: 2;
}
#hours p {clear:both;} /**** Added ****/

解决方案2
 0  2014-03-04 05:30:18

您需要做的就是减小适合于#hours div的inner-div大小，并为每个内部div分配一个类，然后左右浮动它们。

例 

<div id="hours">
    <div class="left">
        <p class="titles">Hours</p>
        <p class="subtitles">Lunch</p>
        <p class="subtitles">Dinner</p>
        <p class="subtitles">Bar</p>
    </div>
    <div class="right">
        <p class="hours">Mon-Fri 11-4</p>
        <p class="hours">Mon-Sat 4-12</p>
        <p class="hours">Mon-Sat 4-12</p>
    </div>
</div><!--end hours-->

CSS： 

#hours .left
{
    float: left;
}

#hours .right
{
    float: right;
}

这肯定会有所帮助。 也开始使用浏览器的控制台。 它们减轻了您的生活。

解决方案3
 0  2014-03-04 05:37:44

我认为您试图使“小时”占据整个盒子？

如果是这样，请向其添加以下代码： 

height: 100%;
width: 100%;
padding: 0px;

解决方案4
 0  2014-03-04 05:45:34

使用followig。 在这里注释的那些，需要从您的代码中删除。 

div.container {
    /*height: 460px;*/
    /*padding: 10px*/
    padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
    /*inline-block*/
}

现在，在#hours标记结束后添加以下内容。 

<div style="clear:both;"></div>


为了使#hours div看起来不错，请使用以下命令。 

<div id="hours">
    <h3 class="titles">Hours</h3>
    <dl>
        <dt>Lunch</dt>
        <dd>Mon-Fri 11-4</dd>
        <dt>Dinner</dt>
        <dd>Mon-Sat 4-12</dd>
        <dt>Bar</dt>
        <dd>Mon-Sat 4-12</dd>
    </dl>
</div><!--end hours-->

CSS样式- 

#hours dl,
#hours dt,
#hours dd {
    margin: 0;
    padding: 0;
}
#hours dl {
    width: 100%;
    float: left;
    clear: both;
}
#hours dl dt {
    float: left;
    clear: left;
    width: 45%;
}
#hours dl dd {
    float: left;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 定位 Div 时遇到问题 定位div框时遇到问题 在div中定位图像时出现问题 Div定位 没定位 定位div DIV定位 Div的定位 Div定位 定位DIV
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM