对齐容器中左侧浮动的图像右侧的文本答案

【问题标题】：Align the text on the right side of an image having float left in a container对齐容器中左侧浮动的图像右侧的文本
【发布时间】：2015-03-26 22:11:59
【问题描述】：

我想为一个元素创建一个“卡片”，它将有一个图像、一个标题、一个副标题和一个描述，我想要的是卡片应该左对齐（附在左边边框）但是当我将文本向右浮动时，我得到了这种行为。卡片的位置取决于我设置文本的最大宽度。我怎样才能解决这个问题？

这是显示整个代码的JSFiddle：

这是我用来创建卡片的代码

<div class="first__section">
    <div class="inner">
        <div class="schede__container">
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                    <h1>test</h1>

                    <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你想要的小提琴对我来说看起来不错。
这是因为窗口的宽度，尝试调整查看结果的窗口大小，您会看到卡片对齐到中间，我希望它保持在左侧边框
@LorenzoSignorin 我已经发布了一个可行的解决方案。只需查看它，因为它会解决您的问题。

标签： html css css-float

【解决方案1】：

试试这个 html:

<div class="first__section">
    <div class="inner">
        <div class="schede__container">
            <div class="scheda__realizzazione">
               <div class="div-img">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                   </div>
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
            <div class="scheda__realizzazione">
                <img class="scheda__img" src="http://placehold.it/150x150" alt="">
                <div class="scheda__content">
                     <h1>test</h1>

                     <h2>test</h2>

                    <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.schede__container {
    border-left:1px solid #343333;
}
.scheda__realizzazione {
    text-align: left;
    display:inline-block;
    margin:40px 0 40px 20px;
    padding:40px 0 40px 20px;
    border-bottom:1px solid #343333;
}
.div-img {
    float: left;
}
.scheda__content {
    display: inline-block;
    margin-left: 20px;
    max-width: 313px;
    vertical-align: top;
}
.scheda__content h1 {
    color:#5C5A5B;
    text-transform:uppercase;
    font-size:20px;
}
.scheda__content h2 {
    color:#5C5A5B;
    font-size:20px;
    margin-top: -6px;
}
.scheda__content p {
    color:#5C5A5B;
    text-transform: lowercase;
}
.first__section {
    width:100%;
    text-align:center;
    background-color:white;
}
.inner {
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}

演示http://jsfiddle.net/JentiDabhi/256oxh52/

【讨论】：

尝试调整查看结果的窗口大小，您会看到卡片对齐到中间，我希望它保持连接到左边框

【解决方案2】：

您需要更改以下 CSS 类中的一些属性以实现您的目标。

首先将图片放在单独的 div 中，将内容放在单独的 div 中。

<div class="scheda__realizzazione">
    <div class="div-img">
        <img class="scheda__img" src="http://placehold.it/150x150" alt="">
    </div>
    <div class="scheda__content">
        <h1>test</h1>

        <h2>test</h2>

        <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
    </div>
</div>

为您的图像所需的 .div_img 类添加宽度。

.div-img {
  float: left;
  width: 150px;
}

其次，您只需在.scheda__content 类中设置margin-left 并删除其中的所有其他样式。 margin-left : 150px; 会为您解决问题，但为了更清楚起见，我将其设置为 margin-left: 160px;。

.scheda__content {
  margin-left: 160px;
}

Working JSFiddle Demo Here.

.schede__container {
  border-left: 1px solid #343333;
}
.scheda__realizzazione {
  text-align: left;
  display: inline-block;
  margin: 40px 0 40px 20px;
  padding: 40px 0 40px 20px;
  border-bottom: 1px solid #343333;
}
.div-img {
  float: left;
  width: 150px;
}
.scheda__content {
  margin-left: 160px;
}
.scheda__content h1 {
  color: #5C5A5B;
  text-transform: uppercase;
  font-size: 20px;
}
.scheda__content h2 {
  color: #5C5A5B;
  font-size: 20px;
  margin-top: -6px;
}
.scheda__content p {
  color: #5C5A5B;
  text-transform: lowercase;
}
.first__section {
  width: 100%;
  text-align: center;
  background-color: white;
}
.inner {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}

<div class="first__section">
  <div class="inner">
    <div class="schede__container">
      <div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div>
      
      <div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：