CSS левой и правой стороне

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

Окей, я пытаюсь отделить мой веб в двух дивы, как это:

enter image description here

и намерение состоит в том, что правая сторона понять, что есть что-то слева от него.

Левая сторона:

.left-side { 
    background: url('../img/mesh.png') #333; 
    position: relative; 
    top: 0px; 
    margin-left:0px; 
    width: 100px; 
    height: 100%; 
}

правой стороне: Вот проблема

.right-side { 
    position: relative; 
    margin-left: 100px; 
    top: 0px; 
    float: left; /* Trying to detect something at my left */ 
    height: 100%; 
    width: 100%; 
}

Оба имеют относительные позиции, потому что я прочитал они должны, может быть, я ошибаюсь ...

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

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

<html> 
<head> 
    ..... 
</head> 
<body> 
    <div class="left-side"> 
     <!-- Navbar --> 
    </div> 
    <div class ="right-side"> 
     <div class ="container-fluid"> 
     <!-- etc --> 
     </div> 
    </div> 
</body> 
</html>

Спасибо, что прочитали это. Я попытался бы исправить это самостоятельно, некоторая помощь была бы хорошо получена

источник

2013-03-28 Jesus

Наличие 'top: 0px;' на относительно позиционированном элементе ничего не делает. Вы имели в виду, что могли бы сделать их как «position: absolute;»? (Левая панель должна иметь фиксированную [как в чем-то, которая может быть указана как одна цифра с одной единицей), чтобы она работала.) – Ryan

Спасибо, абсолют работает с левой стороны, но как насчет правый, я дал ему левый край, но я думаю, что есть еще один лучший способ. – Jesus

Левое поле тоже отлично, но не используйте его с 'width: 100%'. (Я бы лично установил 'position: absolute; left: ; top: 0; right: 0;'. Хотя.) Но если Bootstrap предоставляет способы сделать это (видимо, это так), тогда идите с ними. – Ryan

Вы должны использовать то, что дает Bootstrap, который является классами span. Как насчет чего-то подобного?

<html> 
<head> 
    ..... 
</head> 
<body> 
    <div class="row-fluid"> 
     <div class="span3"> 
      <!-- left side --> 
     </div> 
     <div class="span9"> 
      <!-- right side --> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-03-28 19:13:17 woz

Спасибо, может быть, я ошибаюсь, но span9 не будет ограничивать пиксели? Извините, я не знаю, как объяснить себя хорошо (не на английском). Я имею в виду, что я хочу дать право всем, кроме того, что делает левая сторона. – Jesus

Да, так оно и будет работать, когда вы используете 'row-fluid'. Попробуйте и посмотрите, не хотите ли вы этого. – woz

Спасибо, он работает ха-ха. Я меняю первый диапазон для span1 и второй для span11. Это верно?. Кроме того, это большой большой, пусть это просто глупо! :) – Jesus

Добавить float: left; влево. Таким образом, элемент thet идет влево.

источник

2013-03-28 19:14:00 CoursesWeb

Это ломается с 'width: 100%'. Он также не будет охватывать правильную ширину без него. – Ryan

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

Чтобы использовать такие поплавки, вам необходимо установить ширину, и они не могут быть установлены на 100%. Это означает, что они занимают столько же места, сколько и их контейнер, который в этом случае выглядит как весь экран. Это означает, что правый div обернется ниже левого, так как он не может уместиться рядом с ним. Начните с установки слева на ширину 100 пикселей и справа на ширину 500 пикселей, или что-то в этом роде, и поиграйте с ним оттуда.

И сделайте левый поплавок: слева, как указано.

источник

2013-03-28 19:14:15 atw13

CSS левой и правой стороне

ответ

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