Anonymous
Динамическая ширина — CSS
Сообщение
Anonymous » 07 янв 2025, 15:12
Кто-нибудь знает, достижимо ли с помощью CSS следующее?
Я хочу, чтобы div.title и div.spacer занимали 100 % ширины div. row.
Моя цель — создать панель с вкладками. Я очень близок к этому, просто не могу придумать, как установить ширину.spacer, чтобы заполнить оставшееся пространство в div.row
Вот скриншот того, что я делаю:
Вот скрипка:
http://jsfiddle.net/yux2jr1n/
Код: Выделить всё
.row {
width: 100%;
display: block;
display: content-box;
margin: 0 auto 15px auto;
border-left: solid 2px rgba(0, 0, 0, 0.3);
border-right: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
border-radius: 0px 8px 8px 8px;
-moz-border-radius: 0px 8px 8px 8px;
-webkit-border-radius: 0px 8px 8px 8px;
padding-top: 2em;
padding-bottom: 2em;
text-align: left;
max-width: 1200px;
}
.tab {
margin-top: -60px;
display: content-box;
float: left;
width: 100%
}
.spacer {
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
float: right;
}
.title {
border-left: solid 2px rgba(0, 0, 0, 0.3);
border-right: solid 2px rgba(0, 0, 0, 0.3);
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
float: left;
width: auto;
}
.clearfix {
display: block;
clear: both;
width: 100%;
}
Подробнее здесь:
https://stackoverflow.com/questions/280 ... -width-css
1736251928
Anonymous
Кто-нибудь знает, достижимо ли с помощью CSS следующее? Я хочу, чтобы div.title и div.spacer занимали 100 % ширины div. row. Моя цель — создать панель с вкладками. Я очень близок к этому, просто не могу придумать, как установить ширину.spacer, чтобы заполнить оставшееся пространство в div.row Вот скриншот того, что я делаю: [img]https://i.sstatic.net/E0ePH.png[/img] Вот скрипка: http://jsfiddle.net/yux2jr1n/ [code].row { width: 100%; display: block; display: content-box; margin: 0 auto 15px auto; border-left: solid 2px rgba(0, 0, 0, 0.3); border-right: solid 2px rgba(0, 0, 0, 0.3); border-bottom: solid 2px rgba(0, 0, 0, 0.3); border-radius: 0px 8px 8px 8px; -moz-border-radius: 0px 8px 8px 8px; -webkit-border-radius: 0px 8px 8px 8px; padding-top: 2em; padding-bottom: 2em; text-align: left; max-width: 1200px; } .tab { margin-top: -60px; display: content-box; float: left; width: 100% } .spacer { border-bottom: solid 2px rgba(0, 0, 0, 0.3); float: right; } .title { border-left: solid 2px rgba(0, 0, 0, 0.3); border-right: solid 2px rgba(0, 0, 0, 0.3); border-top: solid 2px rgba(0, 0, 0, 0.3); border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; float: left; width: auto; } .clearfix { display: block; clear: both; width: 100%; }[/code] [code] My Work Some Content [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/28003764/dynamic-width-css[/url]