1. дома
  2. Вопрос и ответ
  3. Поплавок с шириной 100%

Поплавок с шириной 100%

2016-06-29 5 views
-3

Я пытаюсь выровнять весь контент с левой стороны, но не работает. Это мой код:Поплавок с шириной 100%

<div style="float: left; width: 250px; background-color: red;"> 
 
    asdfasdf 
 
    <br>asdfasdf 
 
    <br>asdfasdf 
 
    <br>asdfasdf 
 
    <br>asdfasdf 
 
    <br>asdfasdf 
 
    <br> 
 
</div> 
 
<div> 
 
    <div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:600px;"> 
 
    <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
 
    <span class="text-title-right">Example</span> 
 
    <p style="color: #000000;"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 

 
    </div> 
 
</div>

я, что это (но с примером бар, ширина: 100%):

example1: enter image description here example2: enter image description here

Возможно?

источник

2016-06-29 Jerson

+1

Не уверен, что я понимаю. предоставленный вами код дает результат в вашей цели: S это крошечная синяя линия в строке «пример», на которую вы ссылаетесь? – Thomh

+0

Спасибо за ваш ответ. В моем примере (код) крошечная синяя линия ниже красного кратера, я не хочу этого. – Jerson

+0

Просто скорректировал мой пример. Кроме того, любая причина, по которой вы используете встроенный CSS вместо того, чтобы вставлять их в таблицу стилей? – Thomh

ответ

0

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

Переместите top-content-right ниже левого плавали DIV, удалите его width: 100% и добавить margin-left: 250px и он будет работать, как ожидалось

Когда вы плывете элемент влево и хотите другой появляются справа, правый элемент должен быть в разметке и иметь левое поле, соответствующее ширине всплывающего окна.

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

.top-content-right ~ .top-content-right { 
 
    width: 100%; 
 
    margin-left: 0 !important; 
 
}
<div style="float: left; width: 250px; background-color: red; margin: 0 5px 5px 0;"> 
 
    asdfasdf<br> 
 
    asdfasdf<br> 
 
    asdfasdf<br> 
 
    asdfasdf<br> 
 
    asdfasdf<br> 
 
    asdfasdf<br> 
 
</div> 
 
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;"> 
 
    <span class="text-title-right">Example</span> 
 
</div> 
 
<div> 
 
    <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
 
    <p style="color: #000000;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div> 
 
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;"> 
 
    <span class="text-title-right">Example</span> 
 
</div> 
 
<div> 
 
    <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
 
    <p style="color: #000000;"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
</div>

источник

2016-06-29 20:55:49 LGSon

+0

Спасибо, работает как шарм. :) – Jerson

+0

У вас есть margin-left: 250px; в первом баре .. вы не можете сделать это в том же стиле для всех баров? Этот код будет создан динамически. Рядом с красным прямоугольником может быть два бара (margin-left: 250px). У поймите? Код не работает для всех сценариев. – Jerson

+0

@Jerson Когда вы задаете вопрос, вам нужно опубликовать возможные сценарии, иначе ответ не будет охватывать это, во-вторых, мы не можем охватить все аспекты вопроса, но мы можем показать, как преодолеть проблему, после чего она до вас, чтобы использовать это новое руководство и реализовать его на свой собственный код. Я решил ваш первоначальный вопрос, поэтому наиболее подходящим было бы принять его, а затем опубликовать новый вопрос с расширенным сценарием или все приведенные здесь ответы будут недействительными. – LGSon

0

Хорошо, попробуйте это. Я поместил их в два контейнера Divs, называемых слева и справа. Я установил их на процентную ширину - измените их, чтобы решить, сколько из ширины вы хотите, чтобы они занялись. Ваша проблема заключалась в том, что A. в примерной строке не было float B. вы работали с определенной шириной, но на панели примеров была граница 5px.

<div class="left" style="float: left; width: 40%;"> 
<div style="float: left; width: 100%; background-color: red; margin: 0 5px 5px 0;"> 
      asdfasdf<br> 
      asdfasdf<br> 
      asdfasdf<br> 
      asdfasdf<br> 
      asdfasdf<br> 
      asdfasdf<br> 
     </div> 
     </div> 
     <div class="right" style="width:60%; float: right;"> 
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:100%;"> 
<span class="text-title-right">Example</span> 
</div></div> 
     <div> 


       <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 

       <p style="color: #000000;"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
       </p> 

      </div>

вот JS скрипку: https://jsfiddle.net/kow1jxo3/1/

источник

2016-06-29 20:23:52 Thomh

+0

Привет, спасибо за ответ. Посмотрите мое изображение, и вы увидите, что примерная строка находится рядом с красным прямоугольником – Jerson

+0

https://jsfiddle.net/kow1jxo3/2/ Не работает корректно. – Jerson

+0

Подождите: S Итак, вам нужно больше контента под ним? если бы вы могли прояснить, хотите ли вы, чтобы содержимое, приведенное ниже, выглядело так, я с удовольствием добавлю нужный код. – Thomh

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

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