Изображение неправильно расположено

Question

Изображение неправильно расположено

0

Изображение начинает 3/4 пути вниз div и я не могу понять, почему - я хочу, чтобы быть на вершине, текст должен быть слева и изображение справа.

Я играл с плавающим, ясным и встроенным дисплеем, но ничего не меняет.

HTML

<div class="ipslist">

  <p><strong> Why choose IPS Fire & Security? </strong></p>
  <br />

  <ul>
    <li> Service 365 24/7 </li>
    <li> Engineer on site within 4 hours </li>
    <li> Insurance Approved </li>
    <li> Established over 10 years </li>
    <li> We are the UK most loved security service! (thebestof)</li>
    <li> SSAIB & BAFE Accreditation </li>
    <li> 24 hour technical support</li>
  </ul>

  <img src="Images/vanbluefence.jpg"/>

</div>

CSS

.ipslist{
  height: 250px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;    
  font-family: 'Open Sans', Arial, sans-serif;
}

.ipslist img {
  float:right;  
}

SN1Dan 28 апр. 2014, в 14:10

Источник

1

Скрипка, пожалуйста?
Immortal Dude 28 апр. 2014, в 11:48
0

float: right; означает «плавать справа от следующего содержимого», но ваше изображение является последним. Вы можете переместить изображение в верхнюю часть кода или переместить содержимое влево.
xec 28 апр. 2014, в 11:51

Теги:

html

css

4 ответа

Ещё вопросы

float: right; означает «плавать справа от следующего содержимого», но ваше изображение является последним. Вы можете переместить изображение в верхнюю часть кода или переместить содержимое влево.

Sowmya · Answer 1 · 2014-04-28T09-45-00.000Z

Добавить display:inline-block to ul

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

DEMO

Sagar Patil · Answer 2 · 2014-04-28T10-32-00.000Z

Вам лучше было бы обернуть весь текст в div и поместить div влево.

HTML

<div class="ipslist">
    <div class='content-wrapper'>
        <p><strong> Why choose IPS Fire & Security? </strong></p>
        <br />
        <ul>
            <li> Service 365 24/7 </li>
            <li> Engineer on site within 4 hours </li>
            <li> Insurance Approved </li>
            <li> Established over 10 years </li>
            <li> We are the UK most loved security service! (thebestof)</li>
            <li> SSAIB & BAFE Accreditation </li>
            <li> 24 hour technical support</li>
        </ul>
    </div>
    <img src="Images/vanbluefence.jpg"/>
</div>

CSS

.ipslist {
    height: 250px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  
    font-family: 'Open Sans', Arial, sans-serif;
}
.ipslist .content-wrapper{
    float:left;
    width: calc(100% - <width of image>)
}
.ipslist img {
    width:<width of image>; height:auto; 
    float:right;
}

Кроме того, вы можете также float:left как .content-wrapper и изображение, а затем применять clear:both на img.

Reece · Answer 3 · 2014-04-28T09-59-00.000Z

0

Попробуйте использовать абсолютное позиционирование на изображении, но убедитесь, что контейнер не помещен как статический (по умолчанию).

.ipslist {
   height: 250px;
   width: 950px;
   margin-right: auto;
   margin-left: auto;  
   font-family: 'Open Sans', Arial, sans-serif;
   position: relative;
 }

.ipslist img {
   position: absolute;
   top: 0;
   right: 0;
}

Reece 28 апр. 2014, в 09:59

0

отлично, спасибо за вашу помощь! есть ли шанс, что вы могли бы объяснить, почему он это делает, чтобы я учился в следующий раз?
SN1Dan 28 апр. 2014, в 11:57
0

Поскольку ваше изображение находится после остальной части разметки, а ul по умолчанию настроено на display: block , это означает, что текст занимает все доступное пространство вверху, поэтому изображение должно отображаться под ним. Если вы установите для своих текстовых элементов значение float: left , вы могли бы сделать это так, как пытались. Вы также можете установить ul для display: inline-block чтобы он не занимал все пространство.
Reece 28 апр. 2014, в 12:00

Aditzu · Answer 4 · 2014-04-28T09-30-00.000Z

Я думаю, вам нужно что-то подобное http://jsfiddle.net/cv8M6/

Поместите изображение после ipslist и добавьте

.ipslist{
    float:left;
}

#floatingImage{
    float:right; 
}