Question

我需要创建一个带有一些信息的图像，该信息就像一个名称，大学和一个关注按钮，就像这个演示一样

假设浏览器占据了部分宽度的20％，如何在调整浏览器大小时不出现问题地创建此结构？

html：

<section id="some-section">
            <div class="wrapper">
                <div id="img-container">
                    <img src="avatar.png" alt="herp_image">
                </div>
                <div id="hero_details">
                    <h2>John Doe</h2>
                    <span>Professor</span>
                    <span>Neuroscience</span>
                    <span>University of Oxford</span>
                    <div id="Contact">
                        <a href="#">Follow</a>
                        <a href="#">Message</a>
                    </div>

                </div>     
            </div>
        </section>

CSS：

img {
    max-width: 100%;
    max-height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#some-section {
    background: #eee;
    font-family: 'Open Sans', sans-serif;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 20%;
    padding: 10px;
    background: lightgreen;
    line-height: 1.5;
    font-size: 0.9em;
}

#img-container {
    width: 100px;
    height: 200px;
    max-width: 60%;
    max-height: 80%;
    margin-right: 5px;
}

#hero_details {
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: auto;
}

#hero_details span {
    font-size: 0.85em; 
}


#hero_details h2 {
    margin-bottom: 0.5em;
}

此代码在将浏览器调整为较小宽度之前可以正确对齐项目但据我所知，在响应性方面似乎很冗长，效率不高。

Answer 1

只需尝试一下。根据您的参考图像，图像和内容部分的列高将相等。我希望这个解决方案会有所帮助。

img {
    max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
	box-sizing:border-box;
}
a {
    text-decoration: none;
}

.wrapper {
    display: flex;
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}
.hero_details .contact {
    display: flex;
    align-items: flex-end;
}
.wrapper .contact .btn-flow {
    display: inline-block;
    color: #000;
    border: 1px solid #333;
    padding: 3px 4px;
    border-radius: 3px;
}
.wrapper .contact a {
    margin: 0 6px 0 0;
}

<section id="some-section">
    <div class="wrapper">
        <div class="img-container">
            <img src="https://via.placeholder.com/200x300" alt="herp_image">
        </div>
        <div class="hero_details">
            <div class="hero_details_inner">
                <h2>John Doe</h2>
                <p>Professor</p>
                <p>Senior Group Leader and professor of surgical Oncology</p>
                <p>University of Oxford</p>
            </div>
            <div class="contact">
                <a class="btn-flow" href="#">Follow</a>
                <a href="#">Message</a>
            </div>
        </div>
    </div>
</section>

Answer 2

替代解决方案：

.container .img {
  text-align: center;
}

.container .details {
  border-left: 3px solid #ded4da;
}

.container .details p {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  word-break: keep-all;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4 img">
      <img src="http://placehold.it/150x200/CCCCCC&text=Image" alt="" class="img-rounded"> </div>
    <div class="col-sm-6 col-md-4 details">
      <blockquote>
        <h5>John Doe</h5>
        <small>professor</small>
      </blockquote>
      <p>Senior Group Leader and professor of surgical Oncology University Of Oxford</p>
      <div>
        <button type="button" class="btn btn-outline-secondary">Follow</button>
        <button type="button" class="btn">Message</button>
      </div>
    </div>
  </div>
</div>

Answer 3

在我检查了@Shavran的解决方案之后，我对其进行了一些修改，以实现其最大利益，这是最终代码：

html：

  <section id="some-section">
    <div class="wrapper">
      <div class="img-container">
        <img src="https://via.placeholder.com/200x300" alt="herp_image">
      </div>
      <div class="hero_details">  
        <h2>John Doe</h2>
        <div class="hero_details_inner">       
          <p>Professor</p>
          <p>Senior Group Leader and professor of surgical Oncology</p>
          <p>University of Oxford</p>
       </div>
       <div class="contact">
         <a class="btn-flow" href="#">Follow</a>
         <a href="#">Message</a>
       </div>
     </div>
   </div>
  </section>

CSS：

img {
    max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
a {
    text-decoration: none;
}

.wrapper {
    display: flex;
    font-size: calc(11px + 0.4vw);
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}

.hero_details_inner p{
    margin-bottom: 0.5em;
    line-height: 2;
}
.hero_details .contact {
    display: flex;
    align-items: flex-end;
}
.wrapper .contact .btn-flow {
    display: inline-block;
    color: #000;
    border: 1px solid #333;
    padding: 3px 4px;
    border-radius: 3px;
}
.wrapper .contact a {
    margin: 0 6px 0 0;
}

使包裹内容具有响应性的图像

3 个答案: