Как создать подробный вид элемента с помощью CSS

0

Htllo,

У меня есть конкретное div-дерево:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
        <h1>LOREM IPSUM</h1>
        Lorem ipsum
    </div>
    <div class="links">
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
        <div class="drop-down">
            <div class="title">LOREM</div>
            <div class="item">lorem</div>
            <div class="item">lorem</div>
        </div>
    </div>
</div>

Я пытаюсь сделать css-стиль для этого div, который будет выглядеть так:

Изображение 174551

Но я понятия не имею, как мне начать. Не могли бы вы кратко рассказать мне, как справиться с этим или, может быть, дать короткий пример такого рода вещей?

благодаря

  • 0
    обновить свой вопрос неясно
  • 1
    Пожалуйста, поделитесь кодом CSS, который вы уже пробовали.
Показать ещё 2 комментария
Теги:

3 ответа

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

Вы должны немного переписать свой HTML- код. Как это:

<div class="item-detail">
    <div class="title">
        TITLE
    </div>
    <div class="info">
       <h1>LOREM IPSUM</h1>
        <p>Lorem ipsum</p>
    </div>
    <div class="links">
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
         </select>
         <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
        <select class="dropdown">
            <option value="title">LOREM</option>
            <option value="item">lorem</option>
            <option value="item">lorem</option>
        </select>
    </div>
</div>

В CSS вы должны использовать float для выравнивания столбцов, примерно так:

.text, .links {
    float: left;
}

.text {
    width: 70%;
}

.links {
    width: 30%;
}

.dropdown {
    width: 100%;
}

JSFIDDLE: http://jsfiddle.net/UU6Xp/

Поделиться
  • 0
    Мне не нужно выбирать оператор в ссылках, он должен быть похож на "только один открытый раскрывающийся список". Но спасибо за помощь
  • 0
    @TomaszBitowt так баян ?
Показать ещё 2 комментария
1

Попробуйте что-то вроде этого: http://jsfiddle.net/Hac8G/2/

.item-detail {width:100%;} 
.left {float:left; width:75%;} 
.right> {float:right; width:25%; }

<div class="item-detail">
 <div class="title">
    LOREM IPSUM
</div>

<div class="left">
    left stuff
</div>
<div class="right">
    Right stuff
</div>

</div>

поскольку я вижу "макет", вам нужен контейнер div, правый и левый плавающий div с шириной, если вам это нужно. Внутри thoose div вы можете упорядочить свои элементы. надеюсь, это поможет

Поделиться
  • 0
    Я бы не советовал вам использовать «левый» и «правый» столбцы, а скорее более логичные имена. Как «текст», «содержание» или «статья» и «ссылки».
0

.item-detail будет большим прямоугольником на чертеже вашей доски, это контейнер. .title, является заголовком, и поскольку он в своем собственном div, это будет отображаться на собственной строке (точно так же, как на чертеже доски). .info и.links, поскольку они являются блочными (например, заголовок), будут складываться друг над другом, вам нужно переопределить это поведение. Для этого поместите float.info и.links влево, а затем поиграйте с шириной, если хотите, чтобы она заполнила.item-detail.

.info, .links{
     float: left;
}
Поделиться

Ещё вопросы

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