Question

我已经有一段时间了，除了使用Grids或Flexbox之外，我并没有真正找到一个明确的解决方法，在网格或Flexbox中，我在一个列中有一个图像，而在另一列中有多个段落，尽管可以肯定这不是最好的方法是吗？理想情况下，我想要实现的是将我的图像和段落放在中间，左侧的图像放在右侧，而段落在右侧。我也尝试过使用浮点数，但是我却一无所获，与我想要的结果最接近的是Flexbox，尽管通过使用flexbox图像不会随着屏幕尺寸缩小，所以我正在寻找其他解决方案或某人更有知识来帮助我。我在网上四处张望，有人用span而不是段长大，这是一个很好的解决方案，是惯例吗？

    h3 {
    font-family: 'Raleway';
    font-weight: 700;
    color: #979b9e;

    }

    .wrapper {
    background-color: black;
    margin-top: 5%;
    text-align: left;
    }

    .aboutme {
    float: left;
    background-size: cover;
    height: auto;
    width: 5%;
    display: block;
    }

    p {
    color: #000;
    display: inline-block;
    font-family: 'Raleway';
    font-weight: 400;
    color: #979b9e;
    text-align: left;
    font-size: 1em;
    float: right;

    }

     <div class="wrapper">
            <img class="aboutme" src="img/aboutme.jpg">
            <h3>x</h3>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
        </div>

Answer 1

Flexbox无疑是布局内容的一种干净的替代方法。只需设置一个display: flex值的父元素（出于学习目的，我将'wrapper'更改为'row'）。如果您打算使用网格系统，则直系子代可以具有预定义的宽度。

.row {
  display: flex;
  background-color: #f1f1f1;
}

.col-3 { width: 25%; }
.col-9 { width: 75%; }

.aboutme {
  max-width: 100%;
}

h3 {
  font-family: 'Raleway';
  font-weight: 700;
  margin: 0;
  color: #979b9e;
}

p {
  color: #000;
  margin: 0;
  display: block;
  font-family: 'Raleway';
  font-weight: 400;
}

<div class="row">
  <div class="col-3">
    <img class="aboutme" src="https://via.placeholder.com/100">
  </div>
  <div class="col-9">
    <h3>Title</h3>
    <p>Paragraph</p>
  </div>
</div>

Answer 2

您的问题非常广泛，但这能达到您的追求吗？

它不使用网格或弹性框。您也可以进一步压缩此代码，但这只是为了给您一个大概的想法

.half {
  float: left;
  display: inline-block;
  width: 50%;
}
.half img {
  float: left;
  display: inline-block;
  width: 100%;
}

h3 {
  display: inline-block;
  width: 100%;
  font-family: 'Raleway';
  font-weight: 700;
  color: #979b9e;
}

p {
  color: #000;
  display: inline-block;
  display: block;
  width: 100%;
  font-family: 'Raleway';
  font-weight: 400;
  color: #979b9e;
  text-align: left;
  font-size: 1em;
  float: right;
}

<div class="half">
  <img class="aboutme" src="https://images.homedepot-static.com/productImages/22b7f2be-265e-4572-8246-bea85069604a/svn/costa-farms-house-plants-6zz-64_1000.jpg">
</div>
<div class="half">
  <h3>Texttttt</h3>
  <p>Texttttt</p>
  <p>x</p>
  <p>x</p>
  <p>x</p>
  <p>x</p>
</div>

如何将图像与多个段落并排放置

2 个答案: