Два div бок о бок в одном контейнере css

Question

Я хочу иметь два div бок о бок в одном контейнере: первый - это изображение (ширина фиксирована, но код должен применяться для разных изображений различной ширины). Второй - оставшуюся часть контейнера.

.conteiner { 
    position: relative; 
} 
.image{ 
    display: inline-block; 
    top: 0; 
    right: 0; 
    position: absolute; 
    width: auto; 
} 
.text{ 
    display: inline-block; 
    position: relative; 
    max-width: 100%; 
} 

Но изображение будет размещено над текстом.

<div class="container"> 
<div class="text"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat. 
     </p> 
</div> 
<div class="image"> 
    <img width="151" height="97"> 
</div> 

В этом примере изображение имела ширину 151px высоту и 97 пикселей. Но для других изображений не должно быть одинаковым.

Answer 1

Удалить top: 0;right: 0;position: absolute;, чтобы не допустить, чтобы ваш .image был размещен абсолютно так, чтобы текст не перекрывал его.

изменить свою ширину так, чтобы P не переместил ширину.

также добавить vertical-align:top;, чтобы держать предметы на вершине.

см ниже

.conteiner { 
 
    position: relative; 
 
} 
 
.align { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.text { 
 
    max-width: 50%; 
 
} 
 
.image { 
 
    max-width: 50%; 
 
}

<div class="container"> 
 
    <div class="text align"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat. 
 
    </p> 
 
    </div> 
 
    <div class="image align"> 
 
    <img width="151" height="97"> 
 
    </div>

Это может быть более разумным решением для того, что вы после этого.

.conteiner { 
 
    position: relative; 
 
    display:table; 
 
    } 
 
    .align { 
 
    vertical-align: top; 
 
    display: table-cell; 
 
    position: relative; 
 
    }

<div class="container"> 
 
    <div class="text align"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat. 
 
    </p> 
 
    </div> 
 
    <div class="image align"> 
 
    <img width="151" height="97"> 
 
    </div>

Answer 2

Это достигается путем предоставления изображения (или контейнер изображения) в float:left и текстовый контейнер margin-left.

Пожалуйста, обратите внимание на этот пример:

https://jsfiddle.net/k4054xkm/

HTML:

<div class="container"> 
    <div class="image"> 
     <img src="http://placehold.it/200x200"> 
    </div> 
    <div class="text"> 
     <h1>Testtext</h1> 
     <p>A bit of Testtext</p> 
    </div> 
</div> 

CSS

.container { 
    position: relative; 
} 
.image{ 
    float:left; 
    width:200px; 
} 
.text{ 
    margin-left:220px; 
} 

Пожалуйста, измените ширину и запас налево для ваших нужд.

Answer 3

У вас есть абсолютное положение. Измените это значение, что этот блок не реально принимает ширину, а второй блок относителен, он займет то же место, что и абсолютный блок принимает .image (над или под ним). вы можете попробовать переписать CSS так:

.conteiner { 
} 
.image{  
float:right; 
width: auto; 
} 
.text{ 
float: right; 
max-width: 100%; 
} 

вы можете заменить поплавок: право плавать: слева, если вы начинаете с левой стороны.