Question

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

这是显示整个代码的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>

Answer 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;
}

demo http://jsfiddle.net/JentiDabhi/256oxh52/

Answer 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;
}

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

.scheda__content {
  margin-left: 160px;
}

<强> Working JSFiddle Demo Here.

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

将具有浮动的图像右侧的文本对齐在容器中

2 个答案: