Пространство между двумя динамическими div

0

Поэтому я пытаюсь получить какое-то пространство между двумя динамическими div. Пространство должно быть горизонтальным. Я хочу, чтобы правый и левый div изменялись с шириной страницы, но между ними все еще есть пробел.

Пространство должно быть прозрачным.

Это то, что у меня есть сейчас:

<div id="container">
    <div id="left"></div>
    <div id="spacer"></div>
    <div id="right"></div>
</div>

Стили:

#container {
height: 85px;
}

#left {
height: 100%;
width: 100%;
float: left;
background: #0f0;
}

#right {
height: 100%;
width: 100%;
float: right;
background: #0f0;
}

#spacer {
height: 100%;
width: 120px;
float: left;
background: #f00;
}

Но это все, что я получаю: JsFiddle

Любая идея, как я могу это исправить?

  • 0
    нужно пространство между левым и правым классом div s?
  • 0
    пространство должно быть прозрачным . Но вы дали ему цвет фона ( background: #f00; ), не удивительно, что он не прозрачен.
Показать ещё 4 комментария
Теги:
website

3 ответа

0
Лучший ответ

Попробуй это:

#left,#right{
    width:calc(50% - 60px); //50% of width, minus 60px because spacer is of 120px
}

DEMO.

Поделиться
  • 0
    Да, это сработало. Спасибо, мастер!
  • 0
    @ EMBE-Net, пожалуйста
0

Вы можете установить размер окна в рамку, а затем просто добавить дополнение к столбцам:

<div id="left">
    <div class="content">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>
<div id="right">
    <div class="content">
        <p>Duis aute irure dolor.</p>
    </div>
</div>

стили:

#left, #right {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-right: 60px;
    width: 50%;
    float: left;
}
#right {
    padding-right: 0;
    padding-left: 60px;
}
.content {
    background: #dfa;
}

Поскольку заполнение является частью столбца, вы должны установить фон в внутренний элемент. Левый и правый столбцы будут по-прежнему находиться рядом друг с другом, но их содержимое будет разделено прозрачным дополнением:

http://jsfiddle.net/FGuth/

Подробнее о пограничном поле: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Поделиться
-1

Почему бы не изменить ширину влево и вправо на 50% и применить отрицательный запас: http://jsfiddle.net/R8Ss4/7/

#container {
    height: 85px;
}
#left {
   height: 100%;
   width: 50%;
   float: left;
   margin-right: -60px;
   background: #0f0;
}    
#right {
    height: 100%;
    width: 50%;
    margin-left: -60px;
    float: right;
    background: #0f0;
}
#spacer {
   height: 100%;
   width: 120px;
   float: left;
   background: #f00;
}
Поделиться
  • 0
    Ваш левый и правый столбец по-прежнему находятся рядом друг с другом без промежутков между ними (удалите цвет фона с прокладки, и вы увидите).
  • 0
    ах да, не очень хорошее решение :) @ У Хирала есть лучшее решение

Ещё вопросы

Сообщество Overcoder
Наверх
Меню