У меня есть макет с div.left слева с установленной шириной 40 пикселей и div.right справа с шириной 100%, чтобы заполнить оставшееся пространство родительского контейнера.Избегайте перекрытия элементов при работе с остатком CSS

HTML:

<div class="parent"> 
    <div class="left"> 
     L 
    </div> 
    <div class="right"> 
     R 
    </div> 
</div>

CSS:

.parent { 
    background: maroon; 
    max-width: 500px; 
} 
.left { 
    float: left; 
    background: green; 
    width: 40px; 
    opacity: 0.7; 
} 
.right { 
    width: 100%; 
    padding-left: 50px; 
    background: blue; 
}

Jsfiddle

Можно ли добиться этого макета (один элемент с фиксированной шириной рядом с другим, который заполняет оставшееся пространство) без Прибегая к методу заполнения, который я использую сейчас? Моя проблема заключается в том, что я хотел бы использовать прозрачный фон для элемента с левым положением, поэтому надпись, скрытая под этими элементами, будет видна. Кроме того, мой текущий подход не уменьшает текучесть.

enter image description here

источник

2014-02-20 Marcatectura

Для этого вам нужно float: left; другой элемент, а ..

.right { 
    width: calc(100% - 40px); 
    background: blue; 
    float: left; 
}

Demo

Кроме того, я использую calc() здесь, чтобы вычесть фиксированный width врезку, которая 40px от 100% правая панель.

enter image description here

Как @Krimson commented, что вы хотите некоторое пространство между элементом а, чем использовать margin

.right { 
    width: calc(100% - 80px); 
    background: blue; 
    float: left; 
    margin-left: 40px; 
}

Demo

Примечание: В демке, я использую overflow: hidden; в качестве быстрого исправления для очистки поплавков, но лучше использовать clear: both; для этого, для получения дополнительной информации об очистке поплавков вы можете прочитать мой ответ here.

Инспектируемых Элементы

enter image description here

источник

2014-02-20 06:47:04

Это не будет работать. Если вы заметите. OP добавляет 50px padding, а левая полоса - всего 40 пикселей, что означает, что он хочет получить промежуток в середине. Добавление float в оба элемента не даст пробел – Krimson

@Krimson Почему это не сработает? Http: // jsfiddle.net/4REh3/2/ –

Вы добавили маржу слева в демо. В css в вашем ответе не было: | – Krimson

Что делать, если у изменить ваш .right к этому:

.right { 
    /* width: 100%; remove width */ 
    margin-left: 50px; /* Margin instead of Padding */ 
    background: blue; 
}

JSFiddle Demo

источник

2014-02-20 07:20:35 Krimson

Избегайте перекрытия элементов при работе с остатком CSS

ответ

JSFiddle Demo

Смежные вопросы