Как отобразить div рядом с другим div без определенной ширины?

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

Структура моей страницы выглядит следующим образом:

<body> 
<div id="content"> 
    <div id="post-content"> 
    <div id="cover"></div> 
    <div id="text"><!-- columns --></div> 
    <div id="theend"><p>THE END</p></div> 
    </div> 
</div> 
</body>

CSS-выглядит следующим образом:

body { margin:0; padding:0; background:black; } 
#content { position:absolute; height:100%; top:0; left:0; } 
#post-content { position:relative; background:transparent; overflow-x: scroll; overflow-y: auto; height: 100%; top:0; left:0; } 
#cover { left:0; top:0; position:absolute; height:100%; width:100%; background: url('http://www.inveralmondchs.org/wp-content/uploads/2014/02/waterfall-godafoss-iceland.jpg') center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: scroll; } 
#text { float:left; width: auto; height:100%; left:100%; position: relative; box-sizing: border-box; padding:0px; margin:0px; font-size:15px; text-align: left; color:white; font-family:'open sans'; -webkit-column-width: 300px; -webkit-column-gap: 40px; -moz-column-width: 300px; -moz-column-gap: 40px; -moz-column-count: auto; column-width: 300px; column-gap: 40px; } 
#theend { float:left; height:100%; position: relative; width:300px; text-align:center; background: green; color:white; }

Вы можете увидеть демо в этом JSFiddle: http://jsfiddle.net/kz5ch49w/47/

Я думаю, что проблема связана с width от #text. Потому что я не могу определить его точно, так как мой сайт динамичен. Затем зеленый левый #theend появляется внизу слева вместо того, чтобы появляться справа от черного div с колонками.

Как это решить?

источник

2015-01-23 Guillaume

Вы можете сделать позицию третьего DIV в абсолют:

#theend { float:left; height:100%; position: absolute; top:0; left: 0; width:300px; text-align:center; background: green; color:white; }

А затем установить позицию через Javascript:

var w1 = document.getElementById("cover").scrollWidth + document.getElementById("text").scrollWidth; document.getElementById("theend").style.left = w1 + "px";

Я раздвоенный вашу скрипку here

источник

2015-01-27 11:37:25

Просто добавьте в ваш CSS:

#cover, #text, #theend { 
    display: inline-block; 
}

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

источник

2015-01-23 04:59:13

Спасибо за ответ, но как вы можете видеть здесь http://jsfiddle.net/kz5ch49w/48/ он по-прежнему не работает ... – Guillaume

Попробуйте настоящий браузер. Другой выход состоит в том, чтобы заменить 3 внутренних divs на пролеты и установить отображение блоков для блокировки, но затем это победит ваше соглашение DIV. –

И это не сработает ... – Guillaume

first off - положение крышки над содержимым, поскольку они оба являются абсолютными.
Изменить #theend to float right
Наконец-то попробуйте изменить/удалить -moz-column-width: 300px; и webkit-column. Я удалил его, и он выглядит хорошо.

Это помогает получить зеленый div справа и фон, но я все еще не вижу отображаемого текста. Сообщите, если я найду, как это сделать.

источник

2015-01-23 05:10:41

Благодарим вас за ответ. Я не уверен, что понял ваше предложение. Вот новая демонстрация: http://jsfiddle.net/kz5ch49w/49/ (обложка исчезла, больше нет столбца и т. Д.) – Guillaume

Можете ли вы попробовать его в браузере, чем jsfiddle. Они работают по-разному. Я обновил положение div в демо. –

Вы говорите об этой версии, которую вы обновили? jsfiddle.net/kz5ch49w/49/ В любом случае, я ввел реальную HTML-страницу: http://arkhana.fr/metalchest/testsanscms/test/test.html. Но у меня больше нет обложки и столбцов (а зеленый div внизу). – Guillaume

Как отобразить div рядом с другим div без определенной ширины?

ответ

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