как сделать слой, что бы его ширина была равна ширине вложенных в него слоев

kent666 · July 7, 2011

Помогите плиз!

Как сделать слой, что бы его ширина была равна ширине вложенных в него слоев

                <div style="float:left; width: 840px; background:white; height: 280px; padding-top:20px" align="center">
                    <div style="height: 260px; background:green; ">
                        <div style="float:left; width: 11px;  background:red; height: 260px;"></div>
                        <div style="float:left; ;  background:white; height: 260px;">333333</div>
                        <div style="float:left; width: 11px;  background:red; height: 260px;"></div>
                    </div>
                </div>

проблема заключается в том что я не знаю какой ширины будет слой

Поэтому мне надо как то задать ширину родительского слоя так, что бы она менялась в зависимости от содержимого!

gibigate · July 7, 2011

как вариант задать отступы с правого и левого края, например если она будет резиновая

margin:0 250px 0 250px;

справа и слева по 250 пкс отступ, ширина резиновая

Softlink · July 7, 2011

так?

<div style="float:left; background:white; height: 280px; padding-top:20px" align="center">
                    <div style="height: 260px; background:green; overflow:hidden; ">
                        <div style="float:left; width: 11px;  background:red; height: 260px;"></div>
		        <div style="float:right; width: 11px;  background:red; height: 260px;"></div>
                        <div style="background:white; height: 260px;">333333</div>
                    </div>
                </div>

Edited July 7, 2011 by Softlink

kent666 · July 7, 2011

что то не так.

            <div style="">
                <div style="float:left; width: 80px;  background:red; height: 300px;">
                    <a href="#"><img alt="" src="images/img05.jpg" style="float:right; padding-top:130px"/></a> 
                </div>

                <div style="float:left; background:white; height: 280px; padding-top:20px; width: 840px;" align="center">
                    <div style="height: 260px; background:green; overflow:hidden; ">
                        <div style="float:left; width: 11px;  background:red; height: 260px;"></div>
                        <div style="float:right; width: 11px;  background:red; height: 260px;"></div>
                        <div style="background:white; height: 260px;">33333rhdftu6r btfyjn nb ty nbyhn3</div>
                    </div>
                </div>

                <div style="float:left; width: 80px;  background:red; height: 300px;">
                    <a href="#"><img alt="" src="images/img06.jpg" style="float:left; padding-top:130px"/></a>    
                </div>

            </div><!-- end photo -->

мне надо что бы вложенные 3 слоя были расположены по центру родителя и ширина среднего менялась в зависимости от содержимого. А получается что средний вложенный слой просто растягивается на всю ширину

Softlink · July 7, 2011

мне надо что бы вложенные 3 слоя были расположены по центру родителя и ширина среднего менялась в зависимости от содержимого. А получается что средний вложенный слой просто растягивается на всю ширину

ну так вы и не все сделали, как я показал. Как у вас будет зависима ширина, если вы зафиксировали ее родителю на 840пк.

Уберите ее и все заработает.

если вам надо ее зафиксировать на максимум, то сделайте

max-width:840px;

kent666 · July 7, 2011

я наверное не правильно объединил что мне надо.

у меня есть слой родительский постоянной ширины 840 рх

В нем слой резиновый по центру родителя

В этом слое 3 слоя. Первый будет окантовкой рисунка 11рх

Второй рисунок переменной ширины

Третий будет окантовкой рисунка 11рх

Edited July 7, 2011 by kent666

SelenIT · July 7, 2011

Не надо пытаться загнать логическую верстку в рамки логики таблицы с ячейкой под каждый слайсик. Или уже таблицей и делать, или дать блокам свободу. Как вариант — inline-block:


<!DOCTYPE html>
<meta charset="utf-8">
<title>Пример</title>
<style>
img { display: block; border: 0; }
.photo { margin: 1em; text-align: center; }
.photo a, .photo div { display:inline-block; *display:inline; vertical-align:middle; }
.photo a { width: 16px; position: relative; }
.photo div { background:white; margin: 0; border:red solid; border-width:0 16px; margin: 0 -16px; display:inline-block; }
*+html .photo div, *+html .photo a { display:inline; zoom: 1; } /* inline-block for IE7 */
</style>
<div class="photo">
   <a href="#"><img alt="" src="http://forum.htmlbook.ru/public/style_images/htmlbook/rte_icons/redo.png"/>
   </a><div><img src="http://s46.radikal.ru/i113/1006/ea/25be6484582f.jpg"></div><a href="#">
   <img alt="" src="http://forum.htmlbook.ru/public/style_images/htmlbook/rte_icons/undo.png"/></a>
</div>

kent666 · July 7, 2011

Вроде бы оно))) Только сейчас разберусь что к чему! :rolleyes:

SelenIT · July 7, 2011

Inline-block заставляет блоки вести себя, как слова в тексте (или картинки, как они ведут себя по умолчанию), подчиняясь text-align, vertical-align (в строке). При этом работают маргины (в т.ч. отрицательные), можно заставлять блоки наезжать друг на друга. Единственный нюанс — пробелы между тегами учитываются (опять же, как между словами в тексте), так что пробелы между ссылками и центральной оберткой в примере я убрал.

kent666 · July 7, 2011

А можно пару вопросов ?

zoom: 1; - ?

vertical-align:middle; - он же работает только для блочных элемнтов

*display:inline; - что значит *

*+html .photo div, *+html .photo a - что значит "+"

Если не трудно можно опишите в общих чертах блок стилей! Очень хочется разобраться!

SelenIT · July 7, 2011

zoom: 1 — в данном случае (и в 99,9% случаев использования) "костыль" для IE7 и ниже, который включает у элементов "волшебное" свойство hasLayout. А сочетание этого свойства с display:inline дает полноценный inline-block для любого элемента (без этого трюка inline-block в старых IE работает только для изначально инлайновых элементов).

vertical-align — наоборот, работает для строчных элементов, выравнивая их в строке (по ее верху, низу, середине или базовой линии текста). Еще для ячеек таблиц, но у нас другой случай.

*+html — буквально означает "элемент html, идущий следом за любым элементом". Формально это валидная запись, но в нормальных браузерах она не имеет смысла, т.к. перед html ничего нет, это корневой элемент. А IE7 по ошибке считает первым элементом доктайп, а html вторым, и в нем это правило сработает (хак такой).

*display:inline — тоже хак для IE ("*свойство" видит только он), в данном случе не нужен, остался от экспериментов . А вообще бывает удобен для быстрой проверки, но невалиден.

kent666 · July 7, 2011

а все это будет нормально отображаться во всех браузерах?

SelenIT · July 7, 2011

Должно. Никакой экзотической магии тут нет, в последних версиях я проверил. IE6 только в этом примере не учтен, но можно одной строчкой и его добавить.

kent666 · July 7, 2011

а как ты проверяешь на валидность кода? и как его можно добавить одной строчкой? :unsure:

klierik · July 7, 2011

а как ты проверяешь на валидность кода? и как его можно добавить одной строчкой?

http://validator.w3.org/#validate_by_input

Sign In

как сделать слой, что бы его ширина была равна ширине вложенных в него слоев

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information