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上有绝对位置，这意味着这个块不是真正占用宽度而第二个块是相对的，他将占据绝对块占用.image（在其上方或下方）的相同位置。你可以尝试像这样重写css：

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

你可以替换浮动：右移浮动：如果从左侧开始，则为左。

两个div在一个容器css中并排

3 个答案: