Как разделить веб-страницу в разных разделах?

Question

У меня есть веб-страница с длиной 2000 пикселей, но я хочу разделить ее на 4 разных раздела (то есть на 500 пикселей каждый), поэтому я могу добавить туда различный контент с различным дизайном. Но я понятия не имею, как это сделать. Я также хотел бы дать им гиперссылки.

Answer 1

страшный ответ - это рамки; умеренно плохой ответ CSS дивы

<div class="bottom"> 
    <div id="area1" style="float: left; width: 25%;"></div> 
    <div id="area2" style="float: left; width: 25%;"></div> 
    <div id="area3" style="float: left; width: 25%;"></div> 
    <div id="area4" style="float: left; width: 25%;"></div> 
</div> 

теперь, когда вы говорите гиперссылок .. Вы имеете в виду, как в нажатии мини часть страницы и расширяется в этой части? потому что вы, вероятно, придется сделать некоторые Jquery хак для этого

$("#area1").click(function(){ 
$("#area1").css("width", "100%"); 
$("area2").css("width", "0%"); 
$("area3").css("width", "0%"); 
$("area4").css("width", "0%"); 
}); 

(выше следует изменить размер щелкнул DIV за квартал, вы щелкнули на 100 в то время как сокращение других. Вы бы тогда стиль индивидуальный DIV в CSS для него по id или классу и т. д.

Answer 2

Простой способ использования бутстрапа, который предоставляет уже сделанные столбцы и с отзывчивой функциональностью. Если вы не хотите использовать следующую опцию, мы можем использовать css или frames.like, как указано выше ответ

Answer 3

Похоже, что вам нужны основные принципы.

Структура вашей страницы - это HTML, а стилистические элементы продиктованы в CSS. Таким образом, вы хотите, четыре логических разделов (ака <div></div>) внутри содержащего <div></div>, как это:

<div> 
    <div></div> 
    <div></div>  
    <div></div> 
    <div></div> 
</div> 

div является то, что называется элемент уровня блока, который будет автоматически расширяться на всю ширину (то есть: 100 %) его контейнера. Вы хотите, чтобы внутренние элементы div принимали равную ширину, и поскольку их четыре, вы делаете какую-то математику.

100%/4 = ширина, которую вы хотите каждый div.

<div> 
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div>  
    <div style="width:25%;"></div> 
    <div style="width:25%;"></div> 
</div> 

Вы заметите это не работает, как ожидалось, так как div элементы будут ширина вы хотите, но только стек поверх друг друга. Чтобы получить их рядом друг с другом, вы можете использовать display:inline-block;, который изменяет уровень блока на что-то между блоком и встроенным.

<div> 
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div>  
    <div style="width:25%; display:inline-block;"></div> 
    <div style="width:25%; display:inline-block;"></div> 
</div> 

Это будет почти то, что вы хотите, за исключением того, вы заметите некоторые пробелы между элементами div, что на самом деле сохраняется в HTML-коде (разрывы строк между <div></div>) белое пространство. Есть несколько способов избавиться от этого. На мой взгляд, проще всего поставить пустой комментарий между элементами, например:

<div> 
    <div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div><!--  
    --><div style="width:25%; display:inline-block;"></div><!-- 
    --><div style="width:25%; display:inline-block;"></div> 
</div> 

Это с помощью стилей CSS внутри HTML-элементов, но вы должны действительно поставить CSS in a stylesheet and reference it in the page.