首页写出css， <section id="section2"> <h1>关于瑜伽课</h1> <div class="box1"> <img class="about-img"src="images/about-img.png"> <div class="box1-text"> <h2>最好的瑜伽</h2> <p>Text</p> <button>了解更多</button> </div> </div> </section>，要求图片在左边，右边自上而下是标题、text、按钮

写出css， <section id="section2"> <h1>关于瑜伽课</h1> <div class="box1"> <img class="about-img"src="images/about-img.png"> <div class="box1-text"> <h2>最好的瑜伽</h2> <p>Text</p> <button>了解更多</button> </div> </div> </section>，要求图片在左边，右边自上而下是标题、text、按钮

时间: 2024-02-16 13:09:05 浏览: 158

可以使用以下 CSS 实现要求： ``` #section2 { display: flex; flex-direction: row; align-items: center; } .box1 { display: flex; flex-direction: row; align-items: center; } .about-img { width: 50%; } .box1-text { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 20px; } .box1-text h2 { font-size: 2em; margin-bottom: 10px; } .box1-text p { font-size: 1.2em; margin-bottom: 20px; } button { background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 5px; border: none; font-size: 1.2em; cursor: pointer; } ``` 这段 CSS 代码会将 `#section2` 的子元素 `.box1` 和 `.box1-text` 摆放在一行，左边是图片，右边是文字。`.box1-text` 使用了 flexbox 布局，使得标题、文本和按钮自上而下排列。你可以将这段代码放在 `<head>` 标签内的 `<style>` 标签中或者在外部的样式表文件中。

阅读全文