CSS изображение внутри div не изменит размеры

Question

У меня есть два div на моей странице, и между двумя div'ами у меня есть изображение. Позвольте мне объяснить подробнее ...

Div 1 - это контейнер страницы. Div 2 - содержит несколько строк текста Изображение - просто обычное изображение в формате JPEG, которое я хочу отформатировать.

Div 2 занимает 40% моей страницы, начиная с левой границы страницы. Это простирается очень далеко вниз по моей странице. Таким образом, остается около 60% моей страницы для работы. Я хочу, чтобы мое изображение было шириной 200 пикселей и высотой 110 пикселей. По той или иной причине мое изображение просто появляется в нижней части моей страницы в оригинальной (предварительно отформатированной) ширине и высоте. Я покажу вам код, который я использую.

HTML:

<div id="container">

  <div id="div2">
    <p> Hi SO, I hope someone can help me with this issue! </p>
  </div>

  <img id="image1" src="test.jpg" alt="" />

</div>

CSS:

#image1{
    width:200px;
    height:100px;
    position:relative;
    float:right;
}

Напомним, что я хочу, чтобы изображение 'image1' было выровнено между левым краем div2 и правой границей страницы. Итак, я хочу, чтобы это было по центру между двумя, но НЕ по центру на моей странице.

Answer 1

Я не думаю, что вы хотите работать с процентами, чтобы достичь того, что вы описываете.

Это в основном то, что вы хотите:

http://jsfiddle.net/fdXHs/2/

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

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

ПОСЛЕ РЕДАКТИРОВАНИЯ ВЕБ-САЙТА

Столбец, в котором должны содержаться оба элемента (изображение и разделение ширины 40%), недостаточно широк, чтобы вместить их обоих (объединенная ширина 957 пикселей, ширина контейнера 845 пикселей). Недостаточно места для изображения, поэтому оно сталкивается с первым делом ...

заменить prductsummary на:

#productsummary {
    clear: both;
    background: red;
    margin: 0 220px 0 10px;
    padding: 10px 0 0 0;
)

и изображение:

#lol {
    width: 200px;
    float: right;
    margin: 10px;
}

Answer 2

Попробуйте добавить float:left; к #div2, например , поэтому . По сути, для размещения контента справа от чего-то, этот другой контент также должен быть плавающим. Но даже в этом случае, если размещенный контент не помещается в оставшееся пространство, он перейдет на следующую строку.

Если вам все еще не удается установить размеры изображения, убедитесь, что вы не переопределяете CSS в самом теге изображения (скажем, <img src="whathaveyou.jpg" width=500 height=500> или <img src="whathaveyou.jpg" style="width:500;height:500">)