Mantenga los bloques en línea receptivos posicionados con el ajuste de línea de texto receptivo

I have two inline blocks (image then content) that I want to position horizontally like this:

enter image description here

Though when the container gets smaller the image and content blocks no longer stay inline. I want the container to constantly increase in height to handle the wrapping of the content text like this:

enter image description here

If the container reaches a limit, the elements will shift and center but at all times trying not create as little whitespace on the sides as possible like this:

enter image description here

I have some HTML that almost works: Ejemplo

<div style="margin:20px; height:auto; box-shadow: 2px 2px 1px #999999;   border-style:solid; border-width:1px; border-color:#dddddd; padding:4px; background-color:white; " >
        <div style="width:100%;" >
            <div style="display:inline-block; padding-top:4px; height:100px; width:100px;">
                <img src='http://placekitten.com/100/100'>
            </div>  
            <div style="display:inline-block;  vertical-align:top; padding-top:4px; min-width:70%; max-width:70%;">
                <h2 style=" font-size:12px;">About</h2>
                <p style="font-size:10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>
</div>

preguntado el 22 de septiembre de 13 a las 20:09

Your fiddle shows that you're giving max-width of 70% to the inner div. -

Removing the max-width only makes the problem worse :) -

I guess I can't understand what you're trying to do -

Just to create the effect shown in the images -

2 Respuestas

Solo agrega text-align: center to the outer block. Inner divs will inherit this, so you should also add text-align: left to the text block.

http://jsfiddle.net/tXke7/1/

Respondido el 22 de Septiembre de 13 a las 21:09

If you increase the window size the container looses positioning - Aaron

What do you mean by that? Try removing the min-width as well. - CBroe

Check out my fiddle. I guess that is what you're after:

http://jsfiddle.net/tXke7/3/

.wrap {
    border: 1px solid #ddd;
    margin: 20px;
    padding: 15px;
}

.wrap img {
    float: left;
    margin-right: 10px;
}

.wrap p {
    margin: 0;
    overflow: hidden;
}

@media(max-width: 500px) {
    .wrap img {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    .wrap p {
        text-align: center;
    }
}

Respondido el 22 de Septiembre de 13 a las 21:09

only if you want to work with percentages. but then it would affect the image size, which would shrink on smaller resolutions and enlarge on higher resolutions. Is that what you want? - charles ingalls

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.