Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   CSS с div'ами пололам (https://javascript.ru/forum/xhtml-html-css/53346-css-s-div%27ami-pololam.html)

VolodinAS 30.01.2015 13:30

CSS с div'ами пололам
 
Вложений: 1
Есть див, допустим id=container. Внутри него необходимо разместить 2 div'а с шириной пополам внутри этого container. Но также внутри этого container должен быть текст, размер которого не влияет на смещение границ этих пополамных дивов. Примерно как-то так.
Поможете с css?

Dark_Delphin 31.01.2015 15:15

Вложений: 1
VolodinAS,
так?
#container{border:3px solid #000; }
  #container2{width:49%;float:left;height:50px; border:3px solid #000;margin-left:5px; }

<div id="container">
<div style="width:100%; height:1px; clear:both;"></div>
<div id="container2">123</div>
<div id="container2">321</div>
<div style="width:100%; height:1px; clear:both;"></div>
</div>
<span style="position: relative;bottom: 75px;left: 0px;text-align: center;margin: 0% 25% 0% 25%;"><h1>Текст в контейнере поверх дивов.</h1></span>

ksa 31.01.2015 21:05

Цитата:

Сообщение от VolodinAS
Внутри него необходимо разместить 2 div'а с шириной пополам внутри этого container.

Это можно сделать как с использованием float... Так и position... Все зависит от информации по высоте того container.

Цитата:

Сообщение от VolodinAS
Но также внутри этого container должен быть текст, размер которого не влияет на смещение границ этих пополамных дивов.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
#container {
	position: relative;
	overflow: hidden;
}
#text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
#left {
	float: left;
	width: 50%;
}
#right {
	margin-left: 50%;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='container'>
	<div id='text'>Тут просто обычный текст...</div>
	<div id='left'>left</div>
	<div id='right'>right</div>
</div>
</body>
</html>

VolodinAS 17.02.2015 09:27

Огромное спасибо за ответы. Плюсую! Обязательно попробую оба варианта. Просто времени нет


Часовой пояс GMT +3, время: 22:46.