Дифмен қиындықтар қалқып кеткеннен кейін қалды

Мен екі дивизорды көлденең орналастыруға тырысамын, бірақ екінші бөлімнің мазмұны бірінші біреудің биіктігінен асып түссе, мен жаман нәтиже аламын:

Міне, менің Html коды:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>

<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more     text here more text here more text here more text here more text here more text     here </div>
<div class="spacer"></div>
</div>
</body>

және бұл менің Css:

.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: #00ff00;
      }

.container {
width: 30%;
}

.spacer {
 clear: both;
}

Мен қалаған нәтиже:

enter image description here

бірақ мен мынаны аламын:

enter image description here

4
Сұрақ: неге div.yellow жасыл және div.green сары?
қосылды автор Evan Mulawski, көзі

10 жауаптар

Контейнерді бірінші div секілді бірдей түсте жасаңыз және CSS-ді:

JSFiddle жерде

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
қосылды
анық: мен үшін де, төменгі бөліктің дивиальды флотпен араласып кетуіне жол бермеу үшін жасаған аңыз болды
қосылды автор Solano, көзі

Контейнерді бірінші div секілді бірдей түсте жасаңыз және CSS-ді:

JSFiddle жерде

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
қосылды
анық: мен үшін де, төменгі бөліктің дивиальды флотпен араласып кетуіне жол бермеу үшін жасаған аңыз болды
қосылды автор Solano, көзі

Контейнерді бірінші div секілді бірдей түсте жасаңыз және CSS-ді:

JSFiddle жерде

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
қосылды
анық: мен үшін де, төменгі бөліктің дивиальды флотпен араласып кетуіне жол бермеу үшін жасаған аңыз болды
қосылды автор Solano, көзі

Флоут әдетте осындай орналасу мақсаттары үшін пайдаланылғанымен, бастапқыда float мәтіндік элементтері үшін жасалған. Сондықтан, floats divs « ел ретінде мінез-құлқымен айналысады».

Мәтінді пішімдеу мәселелерінен басқа екі жүзді элементтердің бірдей автоматты биіктігі болғанда тағы бір қиындық бар. Бұған display сипатын table және table-cell арқылы қолдану арқылы әлдеқайда жақсы қол жеткізуге болады.

Төменде қараңыз:

Тұрақты бағандарсыз HTML динамикалық орналасуы үшін CSS?

Немесе скрипка туралы ғана біліңіз:

http://jsfiddle.net/TfuTE/

2
қосылды

Флоут әдетте осындай орналасу мақсаттары үшін пайдаланылғанымен, бастапқыда float мәтіндік элементтері үшін жасалған. Сондықтан, floats divs « ел ретінде мінез-құлқымен айналысады».

Мәтінді пішімдеу мәселелерінен басқа екі жүзді элементтердің бірдей автоматты биіктігі болғанда тағы бір қиындық бар. Бұған display сипатын table және table-cell арқылы қолдану арқылы әлдеқайда жақсы қол жеткізуге болады.

Төменде қараңыз:

Тұрақты бағандарсыз HTML динамикалық орналасуы үшін CSS?

Немесе скрипка туралы ғана біліңіз:

http://jsfiddle.net/TfuTE/

2
қосылды

Флоут әдетте осындай орналасу мақсаттары үшін пайдаланылғанымен, бастапқыда float мәтіндік элементтері үшін жасалған. Сондықтан, floats divs « ел ретінде мінез-құлқымен айналысады».

Мәтінді пішімдеу мәселелерінен басқа екі жүзді элементтердің бірдей автоматты биіктігі болғанда тағы бір қиындық бар. Бұған display сипатын table және table-cell арқылы қолдану арқылы әлдеқайда жақсы қол жеткізуге болады.

Төменде қараңыз:

Тұрақты бағандарсыз HTML динамикалық орналасуы үшін CSS?

Немесе скрипка туралы ғана біліңіз:

http://jsfiddle.net/TfuTE/

2
қосылды

.container дегенді шектеу үшін белгілі бір background-color шектеуі қиын болуы мүмкін. Бұл мәселеден құтылу үшін балаларға арналған display: table және display: table-cell .

Стиль кестесінде келесі жолдарды ғана қосыңыз:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
қосылды

.container дегенді шектеу үшін белгілі бір background-color шектеуі қиын болуы мүмкін. Бұл мәселеден құтылу үшін балаларға арналған display: table және display: table-cell .

Стиль кестесінде келесі жолдарды ғана қосыңыз:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
қосылды

.container дегенді шектеу үшін белгілі бір background-color шектеуі қиын болуы мүмкін. Бұл мәселеден құтылу үшін балаларға арналған display: table және display: table-cell .

Стиль кестесінде келесі жолдарды ғана қосыңыз:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
қосылды

Егер сіз блоктық элементті өзгерте алсаңыз, сіздің элементіңіз биіктігі мен ені 100% болмайды, бірақ мазмұны сияқты үлкен, немесе CSS арқылы орнатқаныңыздай үлкен болады.

сіз оны css-мен биіктікке бере аласыз

you could give the yellow div a margin-left: 104px

0
қосылды