CSS: Лучший способ макета формата

Question

Я хотел бы знать, что лучший способ для форматирования следующей структуры: (с Eveything выровнен и разнесенной аккуратно):

Вот HTML:

<div class"wrapper"> 
    <img alt="Image 1" src="images/image1.png" /> 
    <div class="description"> 
    <h1>Heading 1</h1> 
    <p>Paragraph 1</h1> 
    </div> 
</div> 

Я попытался следующие, но, кажется, не работает, как я не могу выровнять верхнюю часть h1 с верхней части изображения по вертикали выравнивания свойство:

img, div.description { 
    float: left; 
} 

div.description { margin-left: 10px; vertical-align: top; } 

h1 { background: blue; } 
p { background: red; } 

Что делать, если вместо того, чтобы показывать правую часть внизу, , мы хотели, чтобы правая сторона также была вертикально центрирована, а - быть выровненной по высоте?

Вот ссылка JSFiddle:

http://jsfiddle.net/johngoche99/ZPKZj/1/

OK, чтобы сохранить текст из опускаясь ниже, когда браузер изменяет размер необходимо указать ширину элемента обертки, чтобы что-то вроде 700px. Тогда это работает.

Спасибо.

Answer 1

в CSS вам нужно сделать, это

img{ 
    float: left; 
    height: 300px 
} 

div{ 
    float: left; 
} 

h1{ 
    padding: 10px; 
    background-color: #584480; 
    color: #fff; 
    font-weight: normal; 
    font-size: 25px; 
    margin: 0 0 10px 10px; 
} 

p{ 
    padding: 10px; 
    background-color: #E24480; 
    color: #fff; 
    font-weight: normal; 
    font-size: 25px; 
    margin: 0 0 10px 10px; 
} 

больше ничего. ..

Надеюсь, это вам поможет ...

Answer 2

Это может быть выполнено с помощью простого CSS.

img, div{ 
    float: left; 
    margin: 10px; 
} 

http://jsfiddle.net/ZPKZj/2/

IRL, не используйте этот CSS. Это слишком универсально, чтобы быть полезным в любой производственной среде. Вы можете указать идентификаторы или классы элементов, чтобы правила были более конкретными.

Answer 3

Я думаю, что вы хотите что-то вроде этого:

JSFIDDLE

Вы хотите использовать CSS здесь. Вы добавите ID в первый div как <div id="wrapper">, это ваш главный div. Затем во втором div вы добавляете <div id="headings"> для заголовков. то в вашем CSS добавить код ниже. (Обратите внимание: это не самый лучшим код CSS когда-либо, но это работает :).)

HTML:

<div id="wrapper"> 
    <img alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" /> 
    <div id="headings"> 
    <h1>Heading 1</h1> 
    <p>Paragraph 1</h1> 
    </div> 
</div> 

CSS:

#wrapper{ 
width: 960px; 
margin: 0 auto; 
} 

#wrapper img{ 
    float: left;\ 
    margin-right: 40px; 
    padding-right: 40px; 
} 

#headings{ 
    position: relative; 
    float: left; 
} 

h1{ 
    margin-top: -5px; 
} 

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

Answer 4

Это выглядит вам разметкой, нужно немного изменить, чтобы быть больше, khm right; HTML:

<div id="all"> 
    <div id="sidebar"> 
     <img class="side_image" alt="Image 1" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" /> 
    </div> 
    <div id="main"> 
     <h1>Heading 1</h1> 
     <p>Paragraph 1</h1> 
    </div> 
</div> 

CSS:

#sidebar { float: left; } 
#sidebar { margin-right: 40px; } 
h1 { 
    margin-bottom: 30px; 
    margin-top: 0; 
} 

ссылку, чтобы посмотреть, как это будет: http://jsfiddle.net/56Z7C/1/

Answer 5

Вертикальное выравнивание работает только на столах. Если вы хотите сделать это с div с, вы можете попробовать использовать display: table:

<div class="table"> 
    <div class="row"> 
    <div class="cell"> 
     <img alt="Image 1" width="100" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/green-iguana_563_600x450.jpg" /> 
    </div> 
    <div class="cell" id="stuff"> 
     <h1>Heading 1</h1> 
     <p>Paragraph 1</p> 
    </div> 
    </div> 
</div> 

И КСС:

.table { display: table; } 
.row { display: table-row; } 
.cell { display: table-cell; } 
#stuff { vertical-align: middle; } 

Это имеет то преимущество, не будучи зависимыми от размеров/наценки элементов, но не поддерживается в IE7 и ниже. Как и все в жизни, display: table - это компромисс.