Jak zrobić div wypełnić pozostałą przestrzeń poziomą?
Mam 2 divy: jeden z lewej strony i jeden z prawej strony mojej strony. Ta z lewej strony ma stałą szerokość i chcę, aby ta z prawej strony wypełniła pozostałą przestrzeń.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}<div id="search">Text</div>
<div id="navigation">Navigation</div>25 answers
To wydaje się osiągać to, do czego zmierzasz.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-06 08:33:56
Problem, który znalazłem z odpowiedzią Boushleya jest to, że jeśli prawa kolumna jest dłuższa niż lewa, to po prostu owinie się wokół lewej i wznowi wypełnianie całej przestrzeni. Nie takiego zachowania Szukałem. Po przeszukaniu wielu "rozwiązań" znalazłem tutorial (teraz link jest martwy) na tworzenie stron trzech kolumn.
Autor oferuje trzy różne sposoby, jedną stałą szerokość, jedną z trzema zmiennymi kolumnami i jedną ze stałymi kolumnami zewnętrznymi i zmienną szerokością pośrodku. Znacznie bardziej eleganckie i skuteczne niż inne przykłady, które znalazłem. Znacznie poprawiłem moje zrozumienie układu CSS.
Zasadniczo, w prostym przypadku powyżej, przesuń pierwszą kolumnę w lewo i nadaj jej stałą szerokość. Następnie podaj kolumnę po prawej stronie lewy margines, który jest nieco szerszy niż pierwsza kolumna. To wszystko. Załatwione. Kod Ala Boushley:
Oto demo w Stack Snippets & jsFiddle
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}<div id="left"> left </div>
<div id="right"> right </div>Z Przykład boushleya lewa kolumna trzyma drugą kolumnę w prawo. Gdy tylko lewa kolumna kończy się, Prawa zaczyna ponownie wypełniać całą przestrzeń. Tutaj prawa kolumna po prostu wyrównuje się dalej na stronie, a lewa kolumna zajmuje duży margines tłuszczu. Nie wymaga interakcji z przepływem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-10 22:35:13
W dzisiejszych czasach należy stosować metodę flexbox (może być dostosowana do wszystkich przeglądarek z prefiksem przeglądarki).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Więcej informacji: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-20 18:13:47
Rozwiązanie pochodzi z właściwości display.
Zasadniczo musisz sprawić, aby dwa div działały jak komórki tabeli. Więc zamiast używać float:left, będziesz musiał użyć display:table-cell na obu div, a dla dynamicznej szerokości div musisz również ustawić width:auto;. Oba div powinny być umieszczone w kontenerze o szerokości 100% z właściwością display:table.
Oto css:
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url('../images/transparent.png') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
I HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
Ważne: w przeglądarce Internet Explorer należy określić właściwość float na dynamicznym szerokość div, w przeciwnym razie przestrzeń nie zostanie wypełniona.
Mam nadzieję, że to rozwiąże twój problem. Jeśli chcesz, możesz przeczytać cały artykuł, który napisałem o tym na mój blog.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-20 18:12:32
Ponieważ jest to dość popularne pytanie, jestem skłonny podzielić się miłym rozwiązaniem za pomocą BFC.
Codepen przykładowe tutaj .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
W tym przypadku overflow: auto uruchamia zachowanie kontekstowe i sprawia, że właściwy element rozszerza się tylko do dostępnej pozostałej szerokości i naturalnie rozszerzy się do pełnej szerokości, jeśli .left zniknie. Bardzo przydatna i czysta sztuczka dla wielu układów UI, ale być może trudno zrozumieć "dlaczego to działa" na początku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-20 18:14:48
Jeśli nie potrzebujesz kompatybilności ze starszymi wersjami niektórych przeglądarek (IE 10 8 lub mniej na przykład) możesz użyć funkcji calc() CSS:
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-10 09:26:31
@boushley odpowiedź była najbliższa, jednak jest jeden problem, który nie został rozwiązany, który został wskazany. right div zajmuje całą szerokość przeglądarki; zawartość przyjmuje oczekiwaną szerokość. Aby zobaczyć ten problem lepiej:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
Zawartość jest we właściwym miejscu (w Firefoksie), jednak szerokość jest nieprawidłowa. Gdy elementy potomne zaczynają dziedziczyć szerokość (np. tabela z width: 100%), otrzymują szerokość równą szerokości przeglądarka powoduje ich przepełnienie z prawej strony i utworzenie poziomego paska przewijania (w Firefoksie) lub nie pływają i są spychane w dół (w chrome).
Możesz naprawić to łatwo dodając overflow: hidden do prawej kolumny. Daje to prawidłową szerokość zarówno dla treści, jak i div. Ponadto tabela otrzyma odpowiednią szerokość i wypełni pozostałą dostępną szerokość.
Próbowałem innych powyższych rozwiązań, nie działały w pełni z pewnymi krawędziami sprawy i były zbyt zawiłe, żeby je naprawić. To działa i jest proste.
Jeśli są jakieś problemy lub obawy, nie krępuj się je zgłaszać.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-26 19:17:07
Oto mała poprawka dla przyjętego rozwiązania, które zapobiega spadaniu prawej kolumny pod lewą kolumną. Zamienione width: 100%; na overflow: hidden; trudne rozwiązanie, jeśli ktoś o tym nie wiedział.
<html>
<head>
<title>This is My Page's Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
Http://jsfiddle.net/MHeqG/2600/
[edytuj] sprawdź także przykład układu trzech kolumn: http://jsfiddle.net/MHeqG/3148/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-12 22:32:40
Jeśli próbujesz wypełnić pozostałe miejsce w flexbox między 2 elementami, dodaj następującą klasę do pustego div między 2, które chcesz oddzielić:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-17 16:32:31
Użyj display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-21 13:45:04
ODPOWIEDŹ Boushleya wydaje się być najlepszym sposobem, aby zorganizować to za pomocą pływaków. Nie obyło się jednak bez problemów. Zagnieżdżone pływające w rozszerzonym elemencie nie będą dostępne dla Ciebie; spowoduje to złamanie strony.
Pokazana metoda w zasadzie "udaje", jeśli chodzi o element rozszerzający - nie jest on w rzeczywistości pływający, to po prostu gra razem z elementami o stałej szerokości pływających za pomocą jego marginesów.
Problem jest więc taki, że: element rozszerzający nie pływa. Jeśli spróbujesz mieć zagnieżdżone elementy pływające wewnątrz elementu rozwijającego się, te" zagnieżdżone "elementy nie są zagnieżdżone w ogóle; kiedy spróbujesz trzymać clear: both; Pod "zagnieżdżonymi" elementami pływającymi, skończysz wyczyszczając również pływaki najwyższego poziomu.
Następnie, aby użyć rozwiązania Boushleya, chciałbym dodać, że należy umieścić div taki jak poniżej: .fakeFloat { wysokość: 100%; Szerokość: 100%; float: left; } i umieścić go bezpośrednio w expanded div; cała zawartość expanded div powinna znajdować się w tym fakefloatowym elemencie.
Z tego powodu zalecam użycie tabel w tym konkretnym przypadku. Elementy pływające naprawdę nie są zaprojektowane tak, aby wykonać rozszerzenie, które chcesz, podczas gdy rozwiązanie przy użyciu tabeli jest banalne. Zwykle mówi się, że floating jest bardziej odpowiedni dla układów, a nie tabel.. ale i tak nie używasz tu floatingu, tylko udajesz - i to właśnie podważa cel stylistyczny argument za tym konkretnym przypadkiem, moim skromnym zdaniem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-30 21:24:04
Wypróbowałem powyższe rozwiązania dla płynnego lewego, a stały prawy, ale żaden z nich nie zadziałał(wiem, że pytanie jest na odwrót, ale myślę, że jest to istotne). Oto co zadziałało:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-23 14:56:20
Miałem podobny problem i znalazłem rozwiązanie tutaj: https://stackoverflow.com/a/16909141/3934886
Rozwiązanie jest dla stałych kolumn środkowych div I ciekłych kolumn bocznych.
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
Jeśli chcesz mieć stałą lewą kolumnę, po prostu zmień odpowiednio formułę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:25
Można użyć właściwości CSS siatki, jest najbardziej jasne, czyste i intuicyjne struktury sposób swoje pola.
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-10 21:33:43
Ciekawe, że nikt nie używał position: absolute z position: relative
Więc innym rozwiązaniem byłoby:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-16 08:13:48
/* * css */
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/* * html */
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-08 14:11:57
Mam na to bardzo proste rozwiązanie ! // HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
//CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-29 03:45:33
Miałem podobny problem i wymyśliłem następujące, które działały dobrze
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
Ta metoda nie zawija się, gdy okno jest skurczone, ale automatycznie rozszerza obszar "zawartość". Zachowa statyczną szerokość menu witryny(po lewej).
I dla automatycznego rozszerzania pola zawartości i lewego pionowego pola(menu strony) demo:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-07 14:28:18
Spróbuj dodać position relative, Usuń właściwości width i float prawej strony, a następnie dodaj właściwości left i right z wartością 0.
Możesz również dodać margin left regułę, której wartość zależy od szerokości lewego elementu (+ kilka pikseli, jeśli potrzebujesz spacji pomiędzy) , aby utrzymać jego pozycję.
Ten przykład działa dla mnie:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-04 12:51:05
.container {
width:100%;
display:table;
vertical-align:middle;
}
.left {
width:100%;
display:table-cell;
text-align:center;
}
.right {
width:40px;
height:40px;
display:table-cell;
float:right;
}<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</divWarning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-09 14:27:39
Pracuję nad tym problemem od dwóch dni i mam rozwiązanie, które może działać dla Ciebie i każdego, kto próbuje zrobić czułą stałą szerokość w lewo i mieć prawą stronę wypełnić resztę ekranu bez owijania wokół lewej strony. Zakładam, że intencją jest sprawienie, aby strona była responsywna zarówno w przeglądarkach, jak i na urządzeniach mobilnych.
Oto kod
// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed
setTimeout(function(){
fixRightSideWidth();
$('.right_content_container').show(600);
}, 50);
// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; // Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$('.right_content_container').width( $normalRightResize );
$('.right_content_container').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $('.right_content_container').width() > 300 ){
$('.right_content_container').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $('.right_content_container').css("right");
$rightleftPosition = $('.right_content_container').css("left");
$rightwidthPosition = $('.right_content_container').css("width");
$(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don't matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>Oto moje skrzypce, które mogą po prostu pracować dla ciebie tak, jak to było dla mnie. https://jsfiddle.net/Larry_Robertson/62LLjapm/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-10 14:35:27
Zasady dotyczące przedmiotów i pojemników;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Użyj white-space: nowrap; dla tekstów w ostatnich elementach dla ich niezniszczalności.
Pozycja X | / Pozycja Y % / Pozycja Z %
Całkowita długość zawsze = 100%!
If
Item X=50%
Item Y=10%
Item z=20%
Then
Pozycja X=70%
Element X jest dominujący (pierwsze elementy są dominujące w układzie CSS tabeli)!
Try max-content; property for div inside for spreading div in container:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-24 01:49:24
Najprostszym rozwiązaniem jest użycie marginesu. To również będzie responsywne!
<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-08 20:38:55
Najprostszym rozwiązaniem jest po prostu sprawić, aby lewa szerokość div była równa 100% - szerokość prawego div plus dowolny margines między nimi.
<div class="cont">
<div class="search">
Big Logo Text
</div>
<nav>
<ul class="navbar">
<li><a href="#1">NavLink1</a></li>
<li><a href="#2">NavLink2</a></li>
<li><a href="#3">NavLink3</a></li>
<li><a href="#4">NavLink4</a></li>
<li><a href="#5">NavLink5</a></li>
</ul>
</nav>
</div>
.cont{
display: inline-grid;
grid-template-columns: 160px 10px calc(100% - 170px);
grid-template-rows: auto;
grid-template-areas: "search . navigation";
width: 100%;
height: auto;
text-align: center;
}
.search {
grid-area: search;
height: 90px;
background-color: #00FF00;
line-height: 80px;
font-size: 1.4rem;
font-weight: 600;
}
nav {
grid-area: navigation;
height: 90px;
background-color: #A53030;
}
.navbar{
display: flex;
height: 30px;
width: 100%;
padding: 0%;
list-style-type: none;
flex-flow: row wrap;
flex: 0 1 auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.navbar a{
outline: 0;
text-decoration: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-27 14:51:56
Napotkałem ten sam problem próbując rozplanować niektóre kontrolki jqueryUI . Chociaż obecnie powszechną filozofią jest " użycie DIV zamiast TABLE", okazało się, że w moim przypadku użycie TABLE działało znacznie lepiej. W szczególności, jeśli musisz mieć proste wyrównanie w obrębie dwóch elementów(np. centrowanie pionowe, centrowanie poziome itp.) opcje dostępne z tabelą dają do tego proste, intuicyjne sterowanie.
Oto moje rozwiązanie:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-04 22:21:41