Float a div справа от другого div

Question

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

Вот мой HTML

<div id="facility_general_info"> 
    <div id="facility_info"> 
     <h3>Facility Information</h3> 
     <div id="facility_data"> 
      <ul> 
       <li><b>Facility Number</b><p>...</p></li> 
       <li><b>Facility Name</b><p>...</p></li> 
       <li><b>Address</b><p>...</p></li> 
       <li><b>City</b><p>...</p></li> 
       <li><b>Province</b><p>...</p></li> 
       <li><b>Postal Code</b><p>...</p></li> 
       <li><b>Roof Area</b><p>...</p></li> 
       <li><b>Roof Area Inspected</b><p>...</p></li> 
       <li><b>Last Inspected</b><p>...</p></li> 
       <li><b>Inspected By</b><p>...</p></li> 
      <ul> 
     </div> 
     <!--facility front image--> 
     <div id="facility_image"> 
      <div id="fac_image_wrapper"> 
       <img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/> 
      </div> 
      <br /> 
     </div> 
    </div> 
</div> 

Я пытаюсь получить #facility_image «плавать» на правой стороне #facility_data.

Вот мой CSS

#facility_general_info { 
    padding: 5px; 
    float: left; 
    width: 750px; 
    line-height: 110%; 
} 

#facility_info ul { 
    margin-left: -40px; 
    list-style-type: none; 
} 

#facility_info h3 { 
    color: #0d55b7; 
    border-bottom: 2px solid #0d55b7; 
} 

#facility_info { 
    margin-left: 50px; 
    width: 750px; 
    float:left; 
} 

#facility_data{ 
    width: 375px; 
    margin: 0 !important; 
} 

/*facility image*/ 
#facility_image { 
    margin-top: 100px; 
    margin-left: 400px; 
    width: 350px; 
    padding: 5px; 
    float: left; 
} 
#fac_image_wrapper p { 
    width: 250px; 
} 

#fac_image_wrapper{ 
    text-align: center; 
} 

Вот JSfiddle.

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

Answer 1

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

Позвольте #facility_data взять 60% контейнера div и поплыть влево, а изображение возьмет остальные 37% и удалит поле. Кроме того, необходимо дать некоторый запас право на #facility_data сохранить некоторое пространство между 2 подразделений:

#facility_image { 
    /*margin-top: 100px; <<<<< huge margin 
    margin-left: 400px;<<<<< huge margin*/ 
    width: 37%; 
    padding: 5px; 
    float: left; 
} 

#facility_data 
{ 
    width:60%; 
    margin-right:2%; 
    float:left;  

} 

Рабочий пример:

#facility_general_info { 
 
\t padding: 5px; 
 
\t float: left; 
 
\t width: 750px; 
 
\t line-height: 110%; 
 
} 
 

 
#facility_info ul { 
 
\t margin-left: -40px; 
 
\t list-style-type: none; 
 
} 
 

 
#facility_info h3 { 
 
\t color: #0d55b7; 
 
\t border-bottom: 2px solid #0d55b7; 
 
} 
 

 
#facility_info { 
 
\t margin-left: 50px; 
 
\t width: 750px; 
 
\t float:left; 
 
} 
 

 
#facility_data{ 
 
\t width: 375px; 
 
\t margin: 0 !important; 
 
} 
 

 
/*facility image*/ 
 
#facility_image { 
 
\t width: 37%; 
 
\t padding: 5px; 
 
\t float: left; 
 
} 
 

 
#facility_data 
 
{ 
 
    width:60%; 
 
    margin-right:2%; 
 
    float:left;  
 
    
 
} 
 

 
#fac_image_wrapper p { 
 
\t width: 250px; 
 
} 
 

 
#fac_image_wrapper{ 
 
\t text-align: center; 
 
}

<div id="facility_general_info"> 
 
\t <div id="facility_info"> 
 
\t \t <h3>Facility Information</h3> 
 
\t \t <div id="facility_data"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><b>Facility Number</b><p>...</p></li> 
 
\t \t \t \t <li><b>Facility Name</b><p>...</p></li> 
 
\t \t \t \t <li><b>Address</b><p>...</p></li> 
 
\t \t \t \t <li><b>City</b><p>...</p></li> 
 
\t \t \t \t <li><b>Province</b><p>...</p></li> 
 
\t \t \t \t <li><b>Postal Code</b><p>...</p></li> 
 
\t \t \t \t <li><b>Roof Area</b><p>...</p></li> 
 
\t \t \t \t <li><b>Roof Area Inspected</b><p>...</p></li> 
 
\t \t \t \t <li><b>Last Inspected</b><p>...</p></li> 
 
\t \t \t \t <li><b>Inspected By</b><p>...</p></li> 
 
\t \t \t <ul> 
 
\t \t </div> 
 
\t \t <!--facility front image--> 
 
\t \t <div id="facility_image"> 
 
\t \t \t <div id="fac_image_wrapper"> 
 
\t \t \t  <img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250"/> 
 
\t \t \t </div> 
 
\t \t \t <br /> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 2

Используйте display: inline-block, чтобы разместить изображение по горизонтали с данными. Удалите заданное значение для изображения, поскольку изображение уже находится в родительском контейнере. Дайте float: left для обоих элементов, поскольку данные поступают сначала в DOM, изображение направится вправо.

#facility_general_info { 
 
    padding: 5px; 
 
    float: left; 
 
    width: 750px; 
 
    line-height: 110%; 
 
} 
 
#facility_info ul { 
 
    margin-left: -40px; 
 
    list-style-type: none; 
 
} 
 
#facility_info h3 { 
 
    color: #0d55b7; 
 
    border-bottom: 2px solid #0d55b7; 
 
} 
 
#facility_info { 
 
    margin-left: 50px; 
 
    width: 750px; 
 
    float: left; /* Add */ 
 
} 
 
#facility_data { 
 
    width: 375px; 
 
    margin: 0 !important; 
 
    display: inline-block; /* Add */ 
 
    float: left; /* Add */ 
 
} 
 
/*facility image*/ 
 

 
#facility_image { 
 
    width: 350px; 
 
    padding: 5px; 
 
    float: left; 
 
} 
 
#fac_image_wrapper p { 
 
    width: 250px; 
 
} 
 
#fac_image_wrapper { 
 
    text-align: center; 
 
}

<div id="facility_general_info"> 
 
    <div id="facility_info"> 
 
    <h3>Facility Information</h3> 
 
    <div id="facility_data"> 
 
     <ul> 
 
     <li><b>Facility Number</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Facility Name</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Address</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>City</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Province</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Postal Code</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Roof Area</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Roof Area Inspected</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Last Inspected</b> 
 
      <p>...</p> 
 
     </li> 
 
     <li><b>Inspected By</b> 
 
      <p>...</p> 
 
     </li> 
 
     <ul> 
 
    </div> 
 
    <!--facility front image--> 
 
    <div id="facility_image"> 
 
     <div id="fac_image_wrapper"> 
 
     <img src="http://i.imgur.com/rQ5G8sZ.jpg?2" width="250" /> 
 
     </div> 
 
     <br /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

вы недоставало поплавок

#facility_data { 
    float: left; 
} 


#facility_image { 
    margin-top: 0; 
    margin-left: 0; 
} 

alth ух не лучший метод, вы можете научиться использовать Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

Я прибрала your JSFiddle, удаляя некоторые из ненужного HTML элементов, а также фиксируя ошибки в HTML, который был вторым <ul>. Для закрытия списка должно было быть </ul>.

В jsfiddle, мы можем увидеть следующую пониженную CSS в качестве примера:

.facility_info { 
    width: 800px; 
} 

.facility-list { 
    float:left; 
    width: 400px; 
} 

.facility-image { 
    width: 350px; 
    float: right; 
} 

.facility_info достаточно широк, чтобы вместить как определенные дочерние ширины, а также браузер по умолчанию <ul> стайлинга, который добавляет запас.

Затем двое детей плавают влево и вправо соответственно. Селекторы добавляются непосредственно в теги <ul> и <img />, так как вам не нужны обертки (хотя вы можете обернуть этих детей и применить CSS к обертке).

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

Кроме того, вы также немного пострадали от свойств CSS по умолчанию, добавленных в html-элементы браузерами. Загрузка файла reset.css поможет. Объявление css для сброса загружает некоторые значения по умолчанию в верхней части файла css, которые устанавливают различные значения в 0, чтобы перегрузить свойства по умолчанию, установленные браузером. Это дает вам более последовательную и менее запутанную базу для начала стилизации от