Контент CSS установлен влево или вправо (изображение и текст) с использованием элемента Div

Question

Контент CSS установлен влево или вправо (изображение и текст) с использованием элемента Div

0

У меня есть этот код:

.wrapper{
    position: relative;
    height:315px;
}
.wrapper.image{
    position: absolute;
    bottom: 0px;
    height: 259px;
}
.wrapper.text{

}
.left{
    display: inline;
    float:left;
}

<div class="wrapper">
    <div class="image left"><img src="img.jpg"></div>
    <div class="text left">Text</div>
</div>

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

Я хочу этот дизайн: http://i.imgur.com/iMjTg9z.jpg В этом примере я показываю 2 строки.

jeeden 16 март 2014, в 06:01

Источник

2

Все еще не понимаете, что вы хотите от существующего дизайна?
Jay Patel 16 март 2014, в 04:07
0

Я хочу, чтобы img внизу, а текст справа от img. и если размер экрана изменяется, я хочу, чтобы он перенастроил левое / правое поле. с позиции: абсолют, я не могу этого сделать.
jeeden 16 март 2014, в 04:14
0

Это все еще очень неясно. Что вы хотите, в каком порядке, и при каких размерах экрана - примерно.
sheriffderek 16 март 2014, в 04:19
0

Устанавливать любую высоту вообще слишком сложно.
sheriffderek 16 март 2014, в 04:21
0

это помогает? i.imgur.com/iMjTg9z.jpg
jeeden 16 март 2014, в 04:29

Показать ещё 3 комментария

Теги:

html

css

3 ответа

Ещё вопросы

Все еще не понимаете, что вы хотите от существующего дизайна?
Я хочу, чтобы img внизу, а текст справа от img. и если размер экрана изменяется, я хочу, чтобы он перенастроил левое / правое поле. с позиции: абсолют, я не могу этого сделать.
Это все еще очень неясно. Что вы хотите, в каком порядке, и при каких размерах экрана - примерно.
Устанавливать любую высоту вообще слишком сложно.

sheriffderek · Answer 1 · 2014-03-16T01-59-00.000Z

Скрипка:

Таким образом, контент может определять высоту и реагировать

редактировать:

вот еще одна скрипка, в которой используется встроенный блок, - но вам действительно нужно понять позиционирование, чтобы оно было полезным http://jsfiddle.net/sheriffderek/62pU3/

/* требуется вертикальный центр (более того, одна вещь... отображение: встроенный блок и выравнивание по вертикали: среднее - во всех задействованных вещах... имейте в виду, что они выравниваются друг с другом --- не их родительский */

(Оригинал)

HTML

<div class="block">

    <div class="image-w">
        <img src="http://placehold.it/600x300" alt="" />
    </div>

    <div class="text-w">
        <p>text text text</p>
    </div>

</div> <!-- .block -->

CSS

.block {
    width: 100%;
    border: 1px solid red;

    /* this should be a clear fix - or floated instead - because now that the divs inside are floated, it no longer understands how they work unless clear fixed, or (floated itself ) */ 
    overflow: hidden; /* temp replacement for clear fix */
    /* float: left; */
}

.image-w img { /* image fills wrapper | decide size with wrapper */
    display: block;
    width: 100%;
    height: auto;
}

.block .image-w {
    float: left;
}

.block .text-w {
    float: left;
}

/* @media rule "break-point" */
@media (min-width: 40em) {

    .block {
        padding-top: 2em; /* arbitrary space */
    }

    .block .image-w {
        max-width: 15em;
        margin-right: 1em;
    }

    /* i would usually use nth-of-type(even) {} */
    .oposite-block .image-w {
        float: right;
    }

    .block .text-w {
        float: none;
        max-width: 50em;
    }

} /* end breakpoint */

проблема с этим: если текст длинный, он перетекает в сторону изображения, я не хотел, чтобы он перетек туда. Я полагаю, мне придется использовать точку останова медиа ... что вы имеете в виду "я бы обычно использовал nth типа"?
Вероятно, есть 10 способов сделать это хорошо, но я не могу больше тратить время на угадывание ваших ограничений. Вот последняя скрипка с поплавками. Попробуйте это. jsfiddle.net/sheriffderek/kbv3d Удачи!

Jay Patel · Answer 2 · 2014-03-16T03-27-00.000Z

Проверьте это демо jsFiddle

HTML

<div class="wrapper">
    <div class="content">
    <div class="image">
        <img src="http://podcast.iu.edu/upload/IUSEUITS/images/300x300.gif" />
    </div>
    <div class="text">Text</div>
        </div>   
</div>

CSS

.wrapper {
    position: relative;
    height:50px;
    border: 1px solid #f15a27;
}
.content {
    position: relative;
} 
img{
    width:100px;
    height:50px;
}
.image {
    display: inline-block;
    float:left;
}
.text {
    margin:16px 10px 0 0;
    float:right;
}

JunM · Answer 3 · 2014-03-16T01-53-00.000Z

Вы можете обернуть изображение и текст внутри одного div и применить положение: абсолютное.

скрипка

.wrapper {
    position: relative;
    height:315px;
    border: 1px solid red;
}
.content {
    position: absolute;
    bottom: 0px;
} 


.left {
    display: inline-block;

}