текст по блокам

enom · June 30, 2012

подскажите пожалуйста.. как можно сделать так, чтобы, допустим, текст в блоке 2 выводился параллельно текста в блоке 1 ??

ну примерно как "нарисовал" ниже :

|————————————|

| блок1 блок2 |

| |

|————————————|

я слышал это можно как то таблицей сделать...

Edited June 30, 2012 by enom

Vzor · July 1, 2012

Есть вот такой вариант не таблицей.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.box1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.box2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.wrap_box {
	overflow:hidden; 		/* отображение содержания блочного элемента */
}
</style>

</head>
<body>

<div class="wrap_box">
<div class="box1">Блок 1 блок 1 блок 1 блок 1 блок 1</div>
<div class="box2">Блок 2 блок 2 блок 2 блок 2 блок 2</div>
</div>

<p>Hello World</p>

</body>
</html>

jsfiddle

Если нужно таблицей можно так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.tbox {
	border-collapse: collapse; 	/* как отображать границы */
}
.tbox1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
.tbox2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
</style>

</head>
<body>

<table class="tbox">
	<tr>
		<td class="tbox1">Блок 1 блок 1 блок 1 блок 1 блок 1</td>
		<td class="tbox2">Блок 2 блок 2 блок 2 блок 2 блок 2</td>
	</tr>
</table>

</body>
</html>

enom · July 1, 2012

Есть вот такой вариант не таблицей.


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.box1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.box2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
	float: left; 			/* обтекание слева */
}
.wrap_box {
	overflow:hidden; 		/* отображение содержания блочного элемента */
}
</style>

</head>
<body>

<div class="wrap_box">
<div class="box1">Блок 1 блок 1 блок 1 блок 1 блок 1</div>
<div class="box2">Блок 2 блок 2 блок 2 блок 2 блок 2</div>
</div>

<p>Hello World</p>

</body>
</html>

jsfiddle

Если нужно таблицей можно так:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test</title>

<style type="text/css">
.tbox {
	border-collapse: collapse; 	/* как отображать границы */
}
.tbox1 {
	background: #91D149; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
.tbox2 {
	background: #4769E0; 	/* цвет фона */
	width: 45px; 			/* ширина блока */
	padding: 3px; 			/* отступы */
}
</style>

</head>
<body>

<table class="tbox">
	<tr>
		<td class="tbox1">Блок 1 блок 1 блок 1 блок 1 блок 1</td>
		<td class="tbox2">Блок 2 блок 2 блок 2 блок 2 блок 2</td>
	</tr>
</table>

</body>
</html>

ясно) спасибо..

ещё такой маленький вопрос.. что обозначает слово wrap? .. просто очень часто его встречал в цсс стилях..

Vzor · July 1, 2012

Wrap если перевести с английского обёртка. В данном примере это всего лишь имя для CSS класса, можно заменить на любое другое слово. Верстальшики обзывают его так обычно потому что, блок с таким именем в большинстве случаев используется для оборачивания других блоков внутри себя.

Edited July 1, 2012 by Vzor

Sign In

текст по блокам

Question

enom

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Vzor

Link to comment

Share on other sites

enom

Link to comment

Share on other sites

Vzor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information