CSS: сделать два плавающих элемента перекрытыми

У меня есть два div в контейнере. Один плавает влево и один плавает вправо. Оба они примерно на 60% шире, чем контейнер, и спроектированы таким образом, что они перекрываются в середине (правый приоритет имеет приоритет).

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

Код (к сожалению, я не могу это объяснить, поскольку их серверы читаются только atm):

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

#container {
    width: 400px;
    background-color: #eee;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: right;
}

Ответ 1

Используйте отрицательный margin-right в левом поле, чтобы разрешить правообласть:

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    float: left;
    margin-right:-104px;
}

104 пикселей - это количество перекрытий плюс 4 пикселя для границ.

Здесь jsfiddle.

Ответ 2

Вы можете сделать это только с позиционированием.

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

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

Ответ 3

Можете ли вы добавить дополнительный div там?

<div id="container"> 
    <div id="left">
        <div id="left-inner">left</div>
    </div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
} 

#left { 
    float: left;
    width: 0px;
    overflow:visible; 
} 

#left-inner { 
    float: right;
    width: 250px; 
} 

#right { 
    width: 250px; 
}
</style>

Ответ 4

Вы можете создать divs с абсолютной позицией и добавить положительный z-индекс к тому, который вы хотите видеть впереди.

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

#container {
    width: 400px;
    background-color: #eee;
    position: relative;
}

#left {
    width: 250px;
    border: 1px solid #ccc;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
}

#right {
    width: 250px;
    border: 1px solid #ccc;
    display: inline;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}

Ответ 5

Сделайте контейнер более крупным, так что оба подходят. Затем используйте позицию relative и left: -100px или что-то вроде того, что находится справа.

Ответ 6

Отличное решение: http://jsfiddle.net/A9Ap7/237/

Итак, не используйте:

  MARGIN-LEFT:100px...

== или аналогичные команды.
Проблема в том, что если размер левых элементов изменяется, если размер окна изменяется или т.д., то это вызовет у вас проблемы! поэтому не используйте такие пользовательские грязные "трюки", но создавайте нормальную структуру внутри html, поэтому их следует упорядочить естественным образом.

Ответ 7

Попробуйте следующее:

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
<style>
#container { 
    width: 400px; 
    background-color: #eee; 
} 

#left { 
    width: 250px; 
    border: 1px solid #ccc; 
    float: left; 
} 

#right { 
    width: 250px; 
    border: 1px solid #ccc; 
    margin-left: 150px;
    position: absolute;
}
</style>

Ответ 8

Как насчет того, чтобы потянуть правый div с отрицательным полем. Что-то вроде этого?

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

#container {
    position: relative;
    width: 400px;
    height: 110px;
    background-color: #eee;
}

#left {
    width: 250px;
    height: 100px;
    border: 1px solid green;
    float: left;
}

#right {
    position: relative;
    float: right;
    width: 250px;
    height: 100px;
    top: -100px;
    border: 1px solid red;
}