White Space Issue используя процент

Я новичок в CSS при разработке одной странице CSSWhite Space Issue используя процент


 
    body {width:100%;height:920px;margin:0;list-style:none;padding:0;} 
 
    .side{background-color:#9966FF; width:20%;height:920px;float:left;} 
 
    .main{background-color:#CCFFFF; width:80%;height:920px;}

<body> 
 
    <div class="side">Its side bar</div> 
 
    <div class="main">ites center bar</div> 
 
    </body>

Но его дает мне белое пространство после основного класса, так что мое понимание, если я я даю тело как 100%, он разделит это пространство на 20% и 80% в .side и .main класс, пожалуйста, исправьте меня?

источник

2015-05-14 Roli Agrawal

показать нам jsfiddle. Я не знаю, почему у вас есть 100% на теле – Andrew

спасибо @connexo Я узнал его –

На самом деле, float: left на div.side имеет эффект: 100% ширины тела, доступной для div.main. Это то, как плавает. Поэтому просто удалите width: 80% и вместо этого сделайте это margin-left: 20%;, и все готово.

Чтобы лучше понять, что происходит, проверьте следующее: скрипка https://jsfiddle.net/ex6w7tnz/1/

(который имеет ширину на div.main удален, но не добавил Левое поле.)

Так плавающий div.side не влияют на ширину div.main, но только на положение содержимого внутри него, которое соответствует div.side. Это называется плавающей :) Итак, когда вы назначаете ширину 80% для div.main, «белое пространство», которое вы считаете правильным, это просто оставшаяся 20% ширина тела 100%, которую div.main делает не использовать.

источник

2015-05-14 12:01:51 connexo

спасибо @connexo хороший пример мои сомнения очищены спасибо –

Хорошее объяснение. Избили меня. :) – ketan

@Mytri Вы можете щелкнуть галочку слева от моего ответа, показывая, что этот ответ решил вашу проблему. – connexo

float:left Добавить на .main класс

body {width:100%;height:920px;margin:0;list-style:none;padding:0;} 
.side{background-color:#9966FF; width:20%;height:920px;float:left;} 
.main{background-color:#CCFFFF; width:80%;height:920px;float:left;}

источник

2015-05-14 11:51:49 Vicky

проверить этот URL https://jsfiddle.net/ex6w7tnz/ – Vicky

Так что если я буду использовать float on .side, он будет плавать элементами, а если .side ширина составляет 20%, а основная ширина составляет 80% от того места, где появляется пробел? –

@Mytri Пожалуйста, попробуйте понять мой ответ выше. Это подробно объясняется здесь. – connexo

-1

Float проблема очистки. Вот альтернатива: https://fiddle.jshell.net/ts2trhpf/ Вы можете использовать display: inline-block

источник

2015-05-14 11:59:48

Это потому, что вы даете float:left - .side, но не .main div. Итак, с .main 80%, 20% будут внутри бокового div.

Как будто я даю 30% до .main div, тогда он будет показывать только 10%. другие 10% будут скопированы.

body {width:100%;height:920px;margin:0;list-style:none;padding:0;} 
 
    .side{background-color:#9966FF; width:20%;height:920px;float:left;} 
 
    .main{background-color:#CCFFFF; width:30%;height:920px;}

<body> 
 
    <div class="side">Its side bar</div> 
 
    <div class="main">ites center bar</div> 
 
    </body>

Точно так же, если я установить на 20%, то это ничего и текст не показывать идет ниже. Проверить

body {width:100%;height:920px;margin:0;list-style:none;padding:0;} 
 
    .side{background-color:#9966FF; width:20%;height:920px;float:left;} 
 
    .main{background-color:#CCFFFF; width:20%;height:920px;}

<body> 
 
    <div class="side">Its side bar</div> 
 
    <div class="main">ites center bar</div> 
 
    </body>

Чтобы заполнить все тело вам нужно дать float:left для .main дел. Таким образом, он отображается бок о бок.

body {width:100%;height:920px;margin:0;list-style:none;padding:0;} 
 
    .side{background-color:#9966FF; width:20%;height:920px;float:left;} 
 
    .main{background-color:#CCFFFF; width:80%;height:920px; float:left;}

<body> 
 
    <div class="side">Its side bar</div> 
 
    <div class="main">ites center bar</div> 
 
    </body>

Надеется, что это помогает.

источник

2015-05-14 12:05:12 ketan

Хотя это длинный ответ, это не помогает человеку понять, что происходит. См. Мой ответ. – connexo

Это то, что вы пытаетесь сделать, вы были на правильном пути.Это несколько способов активировать один и тот же результат с помощью HTML и CSS.

.parent { 
 
    display: flex; 
 
    height:920px 
 
} 
 
.parent > div { 
 
    display: inline-block; 
 
    border: none; 
 
} 
 

 
.side { 
 
    width: 20%; 
 
    background-color:#9966FF; 
 
} 
 

 
.main { 
 
    background-color:#CCFFFF; 
 
    width: 80%; 
 
}

<div class="parent"> 
 
    <div class="side">text</div> 
 
    <div class="main">text</div> 
 
</div>

источник

2015-05-14 12:28:03 alebruck

White Space Issue используя процент

ответ

Смежные вопросы