anoop_vip Ответов: 8

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

Привет, я хочу разделить свою страницу на 2 вертикальных столбца в соотношении 1n 80/20. я думал об использовании таблиц с 2 столбцами, но некоторые предложили использовать тег div вместо тега table, так как рендеринг таблицы отличается для каждого другого браузера. Итак, как использовать тег div для достижения желаемого эффекта.

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

спасибо тебе
Ануп

8 Ответов

Рейтинг:
68

dreamz9 

<div style="width:100%;"> <!-- Main Div -->
Header
<div style="float:left; width:20%;">
Left  <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:80%; margin-left:10px;">
Right  <!-- Set Div As your requirement -->
</div>
<div>
Footer
</div>
</div>


you will need to modify above styles in stylesheet for all pages.

Member 12164145

Асос

karench

хорошая работа, все гениальное просто.

Рейтинг:
2

Swapna33 

 <div style="width:100%;"> 
Header
<div style="float:left; width:20%;">
Left  Column
<br />
some text goes here
<br />
</div>
<div style="float:right; width:80%; ">
Right Column
<br /> 
some text
<br />
Goes here<br />
</div>

</div>/xml>

Member 9722231

Работал на меня! Спасибо

Sonerao

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

Рейтинг:
2

jaket-cp

Вот техника для двух элементов div бок о бок внутри тела, и занимает 100% высоты тела, не используя технику float.
CSS и HTML:

html,body{
	height:100%;
	width:100%;
}
body{
	margin: 0 0 0 0;
	padding:0 0 0 0;
}
div{
	box-sizing: border-box;-moz-box-sizing: border-box;
	height:100%;
	display: inline-block;
}
body > div:first-child{
	width:80%;
    border:solid 2px green;
}
body > div:nth-child(2){
	width:20%;
    border:solid 2px blue;
}

Примечание: чтобы он работал, между элементами div не должно быть пробелов.
<body>
	<div>AAA</div><div>BBB</div>
</body>

Проверьте эти ссылки для div бок о бок для альтернативных методов:
http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css[^]
http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display[^]
Бок о бок не плавает:
http://stackoverflow.com/questions/3619233/div-side-by-side-without-float[^]

Рейтинг:
1

koolprasadd

Вы также можете использовать тег Frameset.

<body>
<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>
</body>

RaviRanjanKr

Мои 5+

Рейтинг:
1

AvinashAher



левая сторона


Правая сторона

Sonerao

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

Рейтинг:
0

I.explore.code

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

Овации

Рейтинг:
0

raj ch

использовать 

<table></table>
метка.
<table>
   <tr> 
     <td style="border-width:1px; border-color:Black ; border-style :groove ;" width="80">
     </td>
     <td style="border-width:1px; border-color:Black ; border-style :groove ;" width="20">
     </td>
    </tr></table>

Рейтинг:
0

Sajid Syed Ali

Привет Друг
Используя теги набора фреймов вы можете добиться этого
использовать следующее
ссылка http://htmlhelp.com/reference/html40/frames/frameset.html[^]