плавающий div не в верхней части страницы

У меня есть три левых плавающего div (1, 2 & 3) и один плавающий справа (4), который также является последним div в моем HTML-коде. Три слева занимают 60% от ширины, а последний div должен заполняться справа. Однако div 4 только плавает мимо div 3, а затем останавливается.плавающий div не в верхней части страницы

<body> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 1 
    </div> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 2 
    </div> 
    <div style="width: 60%; float: left; background-color: red;"> 
     div 3 
    </div> 
    <div style="width: 40%; float: right; background-color: yellow;"> 
     div 4 
    </div> 
</body>

Любые предложения, как сделать div в верхней части страницы?

источник

2013-07-07 user2220785

некоторый код будет хорошо – Muath

Второй @MoathHowari: помочь нам [воспроизвести] (HTTP: // sscce.org) ваш вопрос (заметьте: вы можете отредактировать свой вопрос, чтобы добавить код к нему). – Jeroen

Дикая догадка: возможно, вы столкнулись с различием между [стандартным размером окна] (http://jsfiddle.net/m4duE/) и [размером рамки] (http://jsfiddle.net/fyyMV/)? – Jeroen

Это то, что вы хотите? DEMO

Я редактировал немного ваш HTML код:

<section class="container"> 
    <div class="block one"></div> 
    <div class="block two"></div> 
    <div class="block three"></div> 
    <div class="block four"></div> 
</section>

Просто добавьте эти правила CSS:

*, *:before, *:after { 
    box-sizing: border-box; 
} 

body, div, section { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    background: #CCC; 
    height: 100%; 
} 
.block { 
    height: 100px; 
    display: inline-block; 
    border: 1px solid black; 
} 
.block:not(.four) { 
    float: left; 
    width: calc(60%/3); 
} 
.four { 
    width: calc(100% - 60%); 
} 
.container > .four { 
    float: right; 
}

Я использовал функцию calc() для установленных анкеров к элементам. Вы можете увидеть поддержку браузера here

EDIT Извините, я не понял ваш вопрос. Это то, что вы хотите! DEMO =)

Cheers, Leo!

источник

2013-07-07 20:29:54 leoMestizo

Что я хочу это: http://jsfiddle.net/SM68h/ За исключением того, что желтый div должен находиться в верхней части страницы (рядом с div 1), а не рядом с div 3 – user2220785

Но в этой скрипке четыре блока не входит в топ Oo Если я хорошо читаю, вы хотите поместить четыре элемента в начало (например, в моей [скрипке] (http://jsfiddle.net/Y9Yck/2/)), а не? – leoMestizo

да, но div 1, 2 и 3 должны быть один ниже друг друга, а не рядом друг с другом. Div 1, 2 и 3 будут основным содержанием моей страницы, а div 4 будет боковой панелью. – user2220785

Я думаю, что вы пытаетесь достичь здесь, поместите на вашей странице content (левые плавающие divs) и sidebar (правый div).
Ну, есть много способов сделать это, вот метод without using floats (справа или слева).

HTML:

<body> 
    <section style="width: 60%;"> <!-- Your main content goes in here --> 
     <div style="background-color: red;">div 1</div> 
     <div style="background-color: red;">div 2</div> 
     <div style="background-color: red;">div 3</div> 
    </section> 
    <aside style="width: 40%;" class="right"> <!-- content for right sidebar --> 
     <div style="background-color: yellow;">div 4</div> 
    </aside> 
</body>

CSS:

aside,section { 
    display : inline-block; 
    padding : 0; 
    margin : 0; 
} 

aside.right { 
    vertical-align: top; //to bring sidebar to top 
}

Вот демо FIDDLE

источник

2013-07-07 20:54:26 face

Добавить '* {box-size: border-box; } 'к вашему примеру, и вы сможете поместить второй« в сторону »на 40% (в свойство' width';);). – leoMestizo

@ LeonardoManrique, который тоже не сработал, вот обновленная скрипка - http://jsfiddle.net/kQ6S6/1/ Поцарапал голову, как правильно ее понять, новичок в jsfiddle: - / – face

плавающий div не в верхней части страницы

ответ

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