Размер Div с относительным содержанием

Question

Размер Div с относительным содержанием

0

У меня есть div с некоторыми изображениями внутри:

    <div>
        <img><img><img><img>
    <div>

Обычно изображения отображаются в строке, однако я использовал некоторый CSS для изменения их относительных позиций слева (-7px для второго, -14px для третьего и т.д.), Поэтому они укладываются частично друг над другом. Есть ли способ сделать div только шириной частично уложенных изображений, а не шириной того, где будут изображения, если они не были перемещены?

RedBassett 20 март 2014, в 20:47

Источник

1

Можете ли вы показать свой фактический HTML вместе с CSS? Спасибо!
Derek Story 20 март 2014, в 19:47

Теги:

html

css

css-position

3 ответа

Ещё вопросы

Можете ли вы показать свой фактический HTML вместе с CSS? Спасибо!

bilcker · Answer 1 · 2014-03-21T11-41-00.000Z

Чтобы центрировать изображения, попробуйте обернуть их в другой div. Не уверен, что у вас есть во всех ваших css, но вы можете получить идею в любом случае. Что-то вроде:

.overlap{
    width:200px;
    outline:1px solid red;
    position:relative;
}
.overlap img{
    outline:1px solid blue;
    display:block;
    height:50px; 
    width:25px;
    position:relative;
    float:right;
}
.overlap img{
    left:-7px;
}   
.overlap img + img{
    left:-14px;
}   
.overlap img + img + img{
    left:-21px;
}
#center{
    width:100px;
    margin:0px auto;
}

<div class="overlap">
<div id="center">
    <img><img><img>
    </div>
</div>

tzvi · Answer 2 · 2014-03-20T18-50-00.000Z

Если вы установите css как

div img {position: absolute;}

все они будут перекрываться без какого-либо перепозиционирования. Он установит размер img, а div - 0, поэтому он будет работать, только если на странице ничего нет.

Это был правильный подход, но согласно моему комментарию к записи Longblog, я пытаюсь центрировать контент (забыл упомянуть эту важную деталь), поэтому он все еще центрирует самый левый край набора изображений.
Что вы пытаетесь центрировать их по отношению к странице: друг к другу (то есть к изображениям разного размера с подобранными центрами или к самому файлу?

Longblog · Answer 3 · 2014-03-20T18-30-00.000Z

Если контент не генерируется динамически, вы можете просто вручную установить div в нужную вам ширину с помощью css.

<div class="overlap">
  <img><img><img>
</div>

.overlap {
  width: 200px;
}

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