CSS позиционирование ящиков внутри контейнеров

Question

CSS позиционирование ящиков внутри контейнеров

0

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

http://jsfiddle.net/liondancer/Pvr73/2/

Это сбивает меня с толку, поскольку я не знаю всех свойств, которые я могу использовать.

Мой html:

{% load staticfiles%}

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
    <div class="container">
      <div class="home-button">
      </div>
      <div class="sidebar">
      </div>
      <div class="content-container">
        {% block content %}

        {% endblock %}
      </div>

    </div>
  </body>
</html>

Liondancer 06 май 2014, в 09:24

Источник

1

это то, чего ты хочешь ? jsfiddle.net/Pvr73/6 Что вы имеете в виду о padding вы говорите о margin ?
Merlin 06 май 2014, в 07:18

Теги:

html

css

3 ответа

1

Пожалуйста, проверьте скрипту, и игнорируйте цвета, просто измените их для лучшей видимости. ;)

Демо-ссылка

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #C2C2C2;
}

.home-button {
background-color: #FFCCFF;
height: 45px;
width: 175px;
}


.sidebar {
background-color: green;
height: 200px;
width: 100px;
margin-top: 20px;
    position: fixed;
}

.container {
width: 70%;
background-color: #E0E0E0;
height: 100%;
margin-right: auto;
margin-left: auto;
position: relative;
padding-left: 4%;
padding-right: 4%;
padding-top: 2%;
padding-bottom: 2%

}

.content-container {
background-color: red;
position: relative;
width: 320px;
height: 80%;
padding-right: 4%;
    float: right;
    margin-top: 20px;

 }

Subh 06 май 2014, в 05:46

1

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

FIDDLE

.sidebar {
    background-color: red;
    height: 200px;
    width: 100px;
    margin-top: 20px;
    float:left;/* added */
}
.content-container {
    background-color: blue;
    position: relative;
    width: 350px;
    height: 100%;
    float:right;/* added */
    margin:20px 5px;/* added */
}

Merlin 06 май 2014, в 05:21

Ещё вопросы

это то, чего ты хочешь ? jsfiddle.net/Pvr73/6 Что вы имеете в виду о padding вы говорите о margin ?

Sutha · Accepted Answer · 2014-05-06T05-44-00.000Z

Вам нужно использовать float: left и float: справа, чтобы выровнять их на одном уровне.

.sidebar {
    background-color: #CCFF99;
    height: 100%;
    width: 100px;
    margin-top: 20px;
    float:left;
}


.content-container {
    background-color: #E6D1E6;
    width: 350px;
    height: 100%;
    margin-right: 4%;
    margin-top: 20px;
    float:right;
}

Проверьте этот jsFiddle для измененного кода

http://jsfiddle.net/Pvr73/5/

благодаря