Как сделать div с двумя div внутри?

Я изучаю html, и я пытаюсь сделать что-то вроде панели с фотографиями людей и некоторыми данными об этом человеке, например, имя, адрес электронной почты, номер телефона и т. Д. Я не знаю, как это сделать, как поставить div внутри другого.Как сделать div с двумя div внутри?

Как я могу сделать код html, который генерирует что-то вроде этого изображения? «большой» div с некоторым цветом, и этот содержит два «невидимых» div, один для изображения, а другой для информации о человеке. Iluatration

PS .: Сайт находится на платформе: sites.google.com (не может измениться время, должны использовать это)

источник

2013-10-09 U23r

атрибут Использование CSS display: inline-block на Div, который вы желаете разместить рядом или float: right или слева. Я предпочитаю display.

источник

2013-10-09 00:10:12 Colandus

Мой сайт является сайт Google (sites.google.com), так что я должен загрузить изображение там, и это создает это:

Вы знаете, как можно Я изменяю это, чтобы сделать, как вы сказали? – U23r

Да, там, где он говорит 'display: block', измените его на' display: inline-block', и вам, возможно, придется избавиться от этого '
' слишком ... – Colandus

Я сделал. Я изменился на встроенный блок, и я удалил
. Скопируйте и вставьте после, теперь у меня есть два изображения в одной строке. А как насчет текста? Как я могу создать div рядом с каждым изображением с текстом и более важным, как я могу разграничить две «комбо» (изображение + текст) для строки? – U23r

Вы можете создать два контейнера div и поместить два div внутри их html. В css контейнер div будет упорядочен по вертикали по умолчанию, что означает, что вы должны применять float: left; для каждого контейнера и для каждого div внутри них.

http://jsfiddle.net/LA7js/

<div class="left-container"> 
    <div class="image-left"></div> 
    <div class="info-left"></div> 
</div> 

<div class="right-container"> 
    <div class="image-right"></div> 
    <div class="info-right"></div> 
</div>

enter image description here

источник

2013-10-09 00:15:35

Как я уже сказал, сайт является google one (sites.google.com), поэтому мне пришлось обновить изображение. Он генерирует код:

Не могли бы вы объяснить, как я могу смешивать это с тем, что вы сказали? – U23r

@Anne http://jsfiddle.net/LA7js/2/ проверить эту скрипту для вашего примера :) –

HTML

<div id="container"> 
    <div id="left"> 
     <div class="image"></div> 
     <div class="contactInfo"></div> 
    </div> 
    <div id="right"> 
     <div class="image"></div> 
     <div class="contactInfo"></div> 
    </div> 
</div>

CSS

#container { 
    /*width and height of main container */ 
    width: 1000px; 
    height:400px; 
} 

#left, #right { 
    float:left; 
    height: 300px; 
    width: 400px; 
} 

div.image { 
    float: left; 
    width: 200px; 
    height: 200px; 
} 

div.contactInfo { 
    float: left; 
    width: 100px; 
    height: 200px; 
}

Числа для высоты и ширины - это общая BS для этого .. но вы получите эту идею. Играйте с цифрами. CSS ваш друг :)

источник

2013-10-09 00:17:27

Не знаю, возможно ли иметь доступ к коду css на сайтах Google, это возможно? – U23r

Я никогда не пользовался сайтами Google, но я на 99% уверен, что вы можете получить доступ к кодам css. – Colandus

Как сделать div с двумя div внутри?

ответ

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