Три столбца, используя Div

0

Я играю с использованием Divs и CSS вместо таблиц, и у меня возникают некоторые проблемы с моим кодом /CSS. Я пытаюсь установить это, поэтому у меня есть 3 столбца рядом с eachother в контейнере, который сосредоточен на странице с текстом, выровненным снизу, поэтому текст находится примерно на той же высоте, что и нижняя часть изображения, которое я использую в центральная колонка. Я не смог этого добиться, и у меня появилось новое уважение к парням с интерфейсом. Мой код и CSS выглядят следующим образом. Любое руководство было бы полезно :)

           body {
        }
        #Container
        {
        border:1px solid #dddddd;
        padding:40px 94px 40px 94px; 
        background:#ffffff;
        width:55%;
        height:auto;
        border-radius:0px;
        margin-left:auto;
        margin-right:auto;
        position:relative;
        }
        #Address
        {
        border:1px solid #dddddd;
        position:relative;
        text-align:left;
        width: 33%;
        }
        #Phone
        {
        border:1px solid #000000;
        position:relative;
        text-align:right;
        width: 33%;
        }
        #Logo
        {
        border:1px solid #4cff00;
        position:relative;
       float: left;
        width: 33%;
        }

HTML

    <div id="Container">
        <div id="Address">123 Testing Street</div>
        <div id="Phone">(ccc) 223-3323</div>
        <div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
    </div></blockquote>
Теги:

3 ответа

1
Лучший ответ

см. скрипку здесь. Это не 100% все, что вы просили, но это большой старт! У вас есть вид таблицы, в которой используется только div. Я не собираюсь закончить каждую мелочь для вас, но это должно заставить вас идти, это почти закончено.

#Container{
   border:1px solid #dddddd;
   padding:5px; 
   background:#bbb;
   width:55%;
   margin: 0px auto;
   position:relative;
   height:200px;
        }
.cell{
   display:inline-block;
   width:32%;
   height:100%;
   border:1px solid #000;
   position:relative;
   vertical-align:bottom;
   line-height:370px;}

 <div id="Container">
    <div id="Address" class="cell">123 Testing Street</div>
    <div id="Phone"  class="cell">(ccc) 223-3323</div>
    <div id="Logo"  class="cell">
        <img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
    </div>
</div>
Поделиться
  • 0
    Это была огромная помощь, и мне удалось довольно легко ею манипулировать. В чем была моя большая проблема? Мне нужно больше узнать об атрибуте дисплея.
  • 0
    вам нужно было либо отобразить: inline-block, либо в другом примере Сэм использует float: right; вам нужно один из двух, чтобы div-ы выстроились горизонтально
Показать ещё 1 комментарий
0

Вы можете добавить span в div и использовать margin-top, чтобы сделать его в нижней части div.

CSS:

#Container > div {    
    min-height: 52px;
    float: left;       
    text-align: center;
}
#Container > div > span {
    display: inline-block;
    margin-top: 35px;

}

Взгляните: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)

Поделиться
0

Я немного упростил ваш CSS. Посмотрите, действительно ли это то, что вы ищете.

#Container{
    margin:0 auto;
    width:500px;
    background:gray;
}
#Address, #Phone, #Logo{
    float:left;
    width:33%;
    height:256px;
    line-height:512px;
}

http://jsfiddle.net/39M9L/1/

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

Поделиться
  • 0
    Когда вы используете высоту строки таким образом, вы не можете установить границу для вашего div! В противном случае текст будет в середине вашего div.
  • 1
    Что вы можете. jsfiddle.net/39M9L/2
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню