Расширить изображение ниже его содержащего div

У меня есть изображение, которое находится внутри div. Похоже, в div. Когда добавляется margin-top, фон для этого div продолжается вниз. Я не хочу этого поведения. Как я могу это изменить?Расширить изображение ниже его содержащего div

Мой код выглядит следующим образом:

<div id="content"> 
    <div class="page"> 
    <div class="half"> 
     <p>Text goes here.</p> 
    </div> 
    <div class="half"> 
     <img src="imghere.png" alt="img" /> 
    </div> 
    </div> 
</div>

CSS

.page { 
    width:500px; 
    margin:0 auto; 
    padding: 5px; 
} 
.half { 
    display:inline-block; 
    width:44%; 
    margin:0 2%; 
}

Это гарантирует, что столбец с <p> тега идет по левой стороне экрана, а столбец с изображением идет справа, и он изменяет размер при изменении размера окна :).

Как я могу сделать эту веб-страницу перейти от

-----div----------- 
Text Image 
-----/div-----------

-----div------------ 
Text 
--/div--Image----

изображения, иллюстрирующий то, что я хотел бы:

enter image description here

источник

2013-05-29 Simon Kiely

Это кажется странным вопросом. Разве вам не нужны два предмета рядом? Не совсем ясно, в чем проблема. Что вы добавляете в верхнюю границу, и чего вы на самом деле хотите достичь? –

@ ralph.m Спасибо за вопрос. Я хочу, чтобы изображение с правой стороны слегка растянулось ниже div, который содержит его. Я добавил изображение, чтобы проиллюстрировать, что я имею в виду. Спасибо за ответ. –

Это вы имеете в виду? http://jsfiddle.net/bH8qA/ –

Edit:

Первоначально я пропустил тот факт, что вы предоставили некоторые HTML и CSS в вопрос, поэтому в моей ori ginal answer Я просто ушел с предоставленного изображения. Если посмотреть на предоставленные HTML и CSS, единственное, что вам нужно сделать, чтобы получить желаемый результат, - установить отрицательный нижний предел в CSS на теге img. Вот jsFiddle с использованием вашей оригинальной разметки, при этом единственным существенным дополнением к CSS является отрицательное нижнее поле, установленное в теге img.

Дополнительным преимуществом этого способа является то, что изображение останется в нужном месте (немного расширенное ниже div, которое содержит его), даже при добавлении дополнительных строк текста в абзац (p) изменяется высота содержащий элемент (.page div).

CSS

.page { 
    width:500px; 
    margin:0 auto; 
    padding: 5px; 
    width: 100%; 
    background-color: #ED1C24; 
    border-top: 3px solid black; 
    border-bottom: 3px solid black; 
    text-align: center; 
} 
.half { 
    display:inline-block; 
    width:44%; 
    margin:0 2%; 
} 
img { 
    margin-bottom:-50px; 
}

Оригинальный ответ:

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

Вот jsFiddle

HTML

<p>Text 
    <br/>Text 
    <br/>Text 
    <br/>Text 
    <br/>Text 
    <br/>Text 
    <br/>Text 
    <br/>Text 
    <br/> 
    <img /> 
</p>

CSS

p { 
    width: 100%; 
    background-color: #ED1C24; 
    border-top: 3px solid black; 
    border-bottom: 3px solid black; 
    text-align: center; 
} 
img { 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    border: 3px solid black; 
    float: right; 
    margin: -70px 100px; 
}

источник

2013-05-29 01:17:45

Используйте CSS и использовать переполнение: скрытый от родителя этого div.

источник

2013-05-29 00:42:32

Я добавил верхний край 250px к содержимому div и задал переполнение: hidden ;. Фон div все еще распространяется на изображение. –

Можете ли вы сделать jsFiddle? –

Что-то вроде этого? http://codepen.io/pageaffairs/pen/urGnL

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

.page { 
    width:500px; 
    margin:0 auto; 
    padding: 5px; 
    background: red; 
} 
.half{ 
    width:44%; 
    margin:0 2%; 
} 

.float { 
    float: right; 
} 

.page, img { 
    border: 5px solid black; 
} 

img { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
} 

</style> 

</head> 
<body> 

<div id="content"> 
     <div class="page"> 
      <div class="half float"> 
       <img src="imghere.png" alt="img" /> 
      </div> 
      <div class="half"> 
       <p>Text</p> 
      </div> 
     </div> 
</div> 

</body> 
</html>

источник

2013-05-29 01:04:08

Я не совсем понимаю вопрос полностью, но я закодирован, что вы хотели в CSS с вашим HTML нетронутыми. Надеюсь, это поможет. Проверьте JSFiddle.

http://jsfiddle.net/bH8qA/

HTML:

<div id="content"> 
     <div class="page"> 
      <div class="half"> 
       <p>Text goes here.</p> 
      </div> 
      <div class="half"> 
       <img src="imghere.png" alt="img" /> 
      </div> 
     </div> 
</div>

CSS:

.page{ 
    background-color:#cc0000; 
    border-top:4px solid #000; 
    border-bottom:4px solid #000; 
    width:500px; 
    margin:0 auto; 
    padding: 5px; 
    position:relative; 
} 
.half{ 
    display:inline-block; 
    width:44%; 
    vertical-align:top; 
    text-align:right; 
} 
.half + .half{ 
    position:absolute; 
    top:20px; 
    text-align:left; 
    margin-left:4%; 
} 
.half > img{ 
    display:block; 
    height:100px; 
    background-color:#F5EB00; 
    border:4px solid #000; 
}

источник

2013-05-29 01:12:07

Расширить изображение ниже его содержащего div

ответ

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