Question

我是python / css / html编程的新手，所以请原谅我提出这样的基本问题！

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

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

我尝试过显示：网格及其功能（不确定我是否正确执行了操作），伸缩和浮动。

这是我的about.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>

这是我的styles.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可以非常简单地对齐此类内容。关于flexbox的常青资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

我还添加了一些HTML，特别是在图像周围添加了包装器，这样您就不必担心将图像作为flex子级而产生的一些怪癖。

出于所有原因，请阅读注释，几乎每一行都存在。 .content div上还有一个红色边框，您可以取消注释以更轻松地查看布局。

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

在某节中水平和垂直对齐图像和段落：

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

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

HTML：

     <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

我该如何对齐文本和图像？

2 个答案: