Проблема с div в позиционировании div

Question

Проблема с div в позиционировании div

0

Вы можете посетить сайт я работаю над здесь.

Вы можете видеть, что я собираюсь сделать. Я хочу, чтобы нижний правый ящик имитировал верхний правый флажок в своем позиционировании, но по какой-то причине он отказывается заполнить остальную часть своего родительского 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;
}

Спасибо за любую помощь или совет!

tfhall4 04 март 2014, в 06:20

Источник

0

Div div#menu-ad div который у вас есть display:inline-block; ... это приведет к тому, что div будет соответствовать размеру содержимого, в котором он находится. Вы можете поместить display:block; или просто удалите сам дисплей. И с #hour div, я #hour , вы хотите, чтобы будние дни были рядом с часами?
JCBiggar 04 март 2014, в 05:29
0

.hours {переполнение: скрыто}
schrodingercat 04 март 2014, в 05:33
0

Сначала вы должны удалить основную проблему; т.е. удалите отступы из div#hours и div#hours div . тогда есть более дальнейшие шаги, чтобы выровнять div.
Kheema Pandey 04 март 2014, в 05:40

Показать ещё 1 комментарий

Теги:

html

css

position

4 ответа

0

Все, что вам нужно сделать, - это уменьшить размер внутреннего div, который соответствует вашему # часу 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;
}

Это поможет. Также запустите использование консолей браузера. Они облегчают вам жизнь.

Osama Yawar Khawaja 04 март 2014, в 04:28

0

Я беру его, пытаясь заставить часы заняться всей коробкой?

Если да, добавьте в него этот код:

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

itsjaked 04 март 2014, в 04:21

0

Используйте 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;
}

Iqbal 04 март 2014, в 04:16

0

Я реализовал ваш совет вместе с @ JCBiggar's, и он отлично работает. Спасибо.
tfhall4 04 март 2014, в 06:02

Ещё вопросы

Div div#menu-ad div который у вас есть display:inline-block; ... это приведет к тому, что div будет соответствовать размеру содержимого, в котором он находится. Вы можете поместить display:block; или просто удалите сам дисплей. И с #hour div, я #hour , вы хотите, чтобы будние дни были рядом с часами?
Сначала вы должны удалить основную проблему; т.е. удалите отступы из div#hours и div#hours div . тогда есть более дальнейшие шаги, чтобы выровнять div.
Я реализовал ваш совет вместе с @ JCBiggar's, и он отлично работает. Спасибо.

JCBiggar · Accepted Answer · 2014-03-04T03-54-00.000Z

Если вы немного измените структуру, это может вам помочь. Вместо того, чтобы пытаться плавать в divs бок о бок, вы можете просто присоединиться к ним вместе, как я сделал с 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 ****/