Премини към съдържанието
  • Добре дошли!

    Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

    Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

     

Въпрос за позициониране на <DIV> в HTML


Препоръчан отговор


И така, почнах с разузнаването на див-тага. И до момента се справям. Имам само един въпрос. Как да сложа два ДИВ елемента един до друг. Когато направя първия ДИВ елемент му задавам например 250 пиксела ширина, На втория задавам същата ширина, но вместо да застанат един до друг вторият елемент отива под първия. Въпросът ми е как да ги накарам да се подредят един до друг.

За момента ползвам такава команда: <div style="position:absolute; top:165px; left:320px; width:250px">

Проблемът е, че всеки елемент трябва да му определям точното място до пиксел. Предполагам има и по-лесен начин, за това питам какъв е той.

Благодаря предварително.

Линк към този отговор
Сподели в други сайтове

И така, почнах с разузнаването на див-тага. И до момента се справям. Имам само един въпрос. Как да сложа два ДИВ елемента един до друг. Когато направя първия ДИВ елемент му задавам например 250 пиксела ширина, На втория задавам същата ширина, но вместо да застанат един до друг вторият елемент отива под първия. Въпросът ми е как да ги накарам да се подредят един до друг.

За момента ползвам такава команда: <div style="position:absolute; top:165px; left:320px; width:250px">

Проблемът е, че всеки елемент трябва да му определям точното място до пиксел. Предполагам има и по-лесен начин, за това питам какъв е той.

Благодаря предварително.

<div style="display:inline;">

Линк към този отговор
Сподели в други сайтове

BTW сработи, но без атрибута position:absolute; незнам защо но се губи ефекта на атрибутите Width и Display...

Линк към този отговор
Сподели в други сайтове

BTW сработи, но без атрибута position:absolute; незнам защо но се губи ефекта на атрибутите Width и Display...

<html>

<head>

</head>

<body>

<div style="display:inline-block;width:250px;border:1px solid #ff0000;">1111</div>

<div style="display:inline-block;width:250px;border:1px solid #ff0000;">2222</div>

</body>

</html>

това работи, но не и под IE.

За там ще трябва да се замени div с span.

Редактирано от Ken (преглед на промените)
Линк към този отговор
Сподели в други сайтове

<html>

<head>

</head>

<body>

<div style="display:inline-block;width:250px;border:1px solid #ff0000;">1111</div>

<div style="display:inline-block;width:250px;border:1px solid #ff0000;">2222</div>

</body>

</html>

това работи, но не и под IE.

За там ще трябва да се замени div с span.

При мен не работи ограничението от 250пиксела. Рамката си е 250 пиксела, ама текста излиза извън рамката. Ето виж...

post-81632-1266005490,05_thumb.jpg

<div style="position:absolute; left:150px; width:200px; display:inline;">

До този вариант стигнах, като краен работещ... Пак измествам див-чето, ама хваща точно размерите и текста не излиза. Не знам що така...


Линк към този отговор
Сподели в други сайтове

При мен не работи ограничението от 250пиксела. Рамката си е 250 пиксела, ама текста излиза извън рамката. Ето виж...

post-81632-1266005490,05_thumb.jpg

<div style="position:absolute; left:150px; width:200px; display:inline;">

До този вариант стигнах, като краен работещ... Пак измествам див-чето, ама хваща точно размерите и текста не излиза. Не знам що така...

Ами логично е. Не може да напишеш текст без нито един пробел, и да искаш да се пренесе. Използвай нормален текст.

Линк към този отговор
Сподели в други сайтове

Разбрах си грешката. Така вече работи както исках :) Благодаря.

Ся последен въпрос и те оставям намира... Как да постигна подобен ефект?

post-81632-1266058432,32_thumb.jpg

Една идея е да затворя средните 4 див-а в отделен див, но искам да питам има ли друг начин? В смисъл ако разделя див 5 на див5.1 и див5.2 и сикам да са един под друг? Пак трябва да го затварям в отделен див и т.н., но може ли да ги позиционирам без да ги затварям в различни дивове?

Редактирано от psycho_666 (преглед на промените)
Линк към този отговор
Сподели в други сайтове
<html>

	<head>


	</head>

	<body>

		<div style="float:left;width:250px;height:500px;border:1px solid #ff0000;">left1 left1 left1</div>

		<div style="float:right;width:250px;height:500px;border:1px solid #ff0000;">right1 right1 right1 </div>

		<div style="margin:0 250px 0 250px;height:500px;border:1px solid #ff0000;">


			<div style="width:100%;height:100px;border:1px solid #ff0000;">top top top</div>


			<div style="float:left;width:33%;height:400px;border:1px solid #ff0000;">left2 left2 left2</div>

			<div style="float:right;width:33%;height:400px;border:1px solid #ff0000;">right2 right2 right2 </div>

			<div style="margin:0 33% 0 33%;height:400px;border:1px solid #ff0000;">middle middle middle</div>


		</div>


	</body>


</body>

</html>

Линк към този отговор
Сподели в други сайтове

Шапка му свалям на Ken...

Линк към този отговор
Сподели в други сайтове

Добавете отговор

Можете да публикувате отговор сега и да се регистрирате по-късно. Ако имате регистрация, влезте в профила си за да публикувате от него.

Гост
Напишете отговор в тази тема...

×   Вмъкнахте текст, който съдържа форматиране.   Премахни форматирането на текста

  Разрешени са само 75 емотикони.

×   Съдържанието от линка беше вградено автоматично.   Премахни съдържанието и покажи само линк

×   Съдържанието, което сте написали преди беше възстановено..   Изтрий всичко

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Добави ново...

Информация

Поставихме бисквитки на устройството ви за най-добро потребителско изживяване. Можете да промените настройките си за бисквитки, или в противен случай приемаме, че сте съгласни с нашите Условия за ползване