我怎样才能像这样对齐文本和图像

Question

我对python/css/html编程很陌生，所以请原谅我问这样一个基本的问题！

我正在尝试将我的文本和图像对齐，就像 Dev Ed 在本教程中一样(右侧为图像，左侧为文本(：https://www.youtube.com/watch?v=C_JKlr4WKKs&t=624s

但是，我无法让它看起来像那样。

我

尝试过显示：网格及其功能(不太确定我是否正确(，flex和float。

这是我关于.html的相关部分：

        <div class="intro-content">
            <span class="intro-text">
                <h2>Jinyang Zhang</h2>
                <p>Hello and nice to meet you! My name is Jinyang Zhang
                    <br>
                    and currently I am a Kamiak High School student.
                    <br>
                    I am interested in software development and AI
                </p>
            </span>
            <img class="image-resize" src="{% static 'img/me.jpg' %}">
        </div>

以下是我的样式.css的相关部分：

            /*image next to text*/
            .image-resize{
                width: 50vh;
                float: right;
                padding: 150px 100px 0px 0px;
                margin-right: 200px;
            }
            /*introduction text that appears*/
            .intro-text{
                width: 30%;
                padding: 100px 0px 0px 40px;
                /*top right bottom left*/
                transition: 1s all ease-in-out;
                opacity: 0;
                transform: translateY(20px);
                float: left;
            }
            /*animation for it to text to appear like the tutorial*/
            .intro-appear{
                opacity: 1;
                transform: translateY(0px);
            }

我也希望它保持格式化，无论屏幕尺寸如何

非常感谢您的帮助1

Answer 1

使用 Flexbox 进行布局。它使CSS非常直接地对齐这样的东西。关于弹性框的常青资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

我也添加了更多的 HTML，特别是在您的图像周围添加了一个包装器，这样您就不必担心作为 flex 孩子出现图像的一些怪癖。

请阅读评论以了解几乎所有原因，几乎每一行都在那里。.contentdiv 上还有一个红色边框，您可以取消注释以更轻松地查看布局。

// Just for demo to add the class after it loads
const text = document.querySelector('.content-text');
setTimeout(function() {
  text.classList.add('intro-appear');
}, 1000);

* { box-sizing: border-box } /* bcuz */
/* section of content */
.intro-section {
  padding: 40px 0; /* buffer spacing above and below your content */
  background: #efefef;
}
/* content wrapper */
.intro-content {
  max-width: 1000px; /* Maximum width the content is allowed to be */
  padding: 0 30px; /* content never touches left/right edges */
  display: flex; /* this is a flexbox container now, horizontal by default */
  align-items: center; /* vertical alignment because the image & text are different heights */
  margin: 0 auto; /* center the whole content container horizontally if the screen is wide */
}
/* flex items */
.content {
  flex-grow: 1; /* take up all the space */
  max-width: 50%; /* 50/50 split layout */
  /* border: 1px solid red;  so you can see what's going on, uncomment to view */
}
/* image wrapper */
.content-image {
  display: flex; /* also a flexbox container... */
  align-items: center; /* ...so the img can be easily centered vertically... */
  justify-content: center; /* ...and horizontaly */
}
/* image, this just needs to obey the size of its wrapper now */
.content-image img {
  max-width: 100%; 
  max-height: 100%;
  width: auto;
  height: auto;
}
/* introduction text that appears */
.content-text {
  padding: 0 30px;
  text-align: center;
  opacity: 0;
  
  /*top right bottom left*/
  transition: 1s all ease-in-out;
  transform: translateY(20px);
}
/* animation for it to text to appear like the tutorial */
.intro-appear {
  opacity: 1;
  transform: translateY(0px);
}

<section class="intro-section">
  <div class="intro-content">
  
    <!-- here is the content, a flex item -->
    <div class="content content-text">
      <h2>Jinyang Zhang</h2>
      <p>Hello and nice to meet you! My name is Jinyang Zhang <br/>
        and currently I am a Kamiak High School student.<br/>
        I am interested in software development and AI</p>
    </div>
    
    <!-- here is the image wrapper, also a flex item -->
    <div class="content content-image">
      <img class="image-resize" src="https://picsum.photos/250/300" />
    </div>
    
  </div>
</section>

Answer 2

在部分中将图像和段落垂直对齐：

您可以使用弹性框轻松创建一个简单的：

码笔：https://codepen.io/ya3ya6/pen/WBqjBY

目录：

     <div class="container">
            <div class="text">
                <h2>Head</h2>
                <p>Paragraph and Paragraph</p>
            </div>
            <img class="image" src="https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80">
        </div>

Css：

.container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}
.container.img{
  width: 50%;
}
.intro-text{
  width: 40%;
}

---

也是一支不改变结构和动画的代码笔：https://codepen.io/ya3ya6/pen/mYZmaB