时间戳

首页 > 解决方案 > display flex 水平显示图像和完整段落，但无法正常工作

html - display flex 水平显示图像和完整段落，但无法正常工作

问题描述

我不知道为什么我的网站无法显示以更改 flex（我的意思是，左侧的一些文本元素和右侧的图像），为什么它不起作用？

.presentation {
  display: flex;
  width: 90%;
  margin: auto;
  min-height: 80vh;
  align-items: center;
}

.introduction {
  flex: 1;
}

.cover img {
  height: 60vh;
}
<main>
  <section class="presentation">
    <div class="introduction">

      <!--intro text..., -->
      <div class="intro-text">
        <h1>mac</h1>
        <p>This is the latest laptop and this laptop is the best ever until nobody doubt that want to mac. This is very powerfull, strong and almost 8k</p>
      </div>

      <!--button ...,-->
      <div class="cta">
        <button class="cta-select">14-inch</button>
        <button class="cta-add">Add Cart</button>
      </div>

      <!-- and images of laptop -->
      <div class="cover">
        <img src="https://bhrigu.me/images/mac.png" alt="laptop mac">
      </div>

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

标签： htmlcssflexboxresponsive-design

解决方案

您错误地使用flex了根目录中的属性。要应用 flex 属性/显示的元素，必须flex在父 div 上使用属性 immediate。

例如：

您必须在intro-text课堂上使用 flex。

CSS：

.intro-text {
    display: flex; 
}

<div class="intro-text">
      <!--button ...,-->
      <div class="cta">
           <button class="cta-select">14-inch</button>
           <button class="cta-add">Add Cart</button>
      </div>

      <!-- and images of laptop -->
     <div class="cover">
         <img src="https://bhrigu.me/images/mac.png" alt="laptop mac">
     </div>
</div>

如果你想把一个元素放在正确的位置。只需使用

.cover {
   margin-left: auto;
}

请看这里：

https://codepen.io/ilazycoder/pen/jOWQvYj

推荐阅读