主页 / 问题 / 1244488
Accepted
user_1234567890
Asked:2022-02-16 04:09:23 +0800 CST2022-02-16 04:09:23 +0800 CST

如何用 flexbox 放置块？

  • 772

请告诉我我的错误是什么？我试图将文本和图像放在一条直线上，使图像完全压在右侧（没有缩进），并且文本位于左边缘和图像之间。由于某种未知原因，文本被压到了左边缘，我对此无能为力。

哦，是的，因为会有几个这样的条带（它们都在主类中），我为 main 制作了一个 flexbox（列对齐），并根据上述方案对齐每个这样的条带。

<main class="main">
    <div class="home">
        <div class="quote">
            <div class="text">
                <a>Здесь какой-то мой текст</a>
            </div>
        </div>
        <div class="image">
            <img src="https://aproekt.ucoz.net/12/man-with-mic-02.png" alt="main home background image" width="50%" height="50%">
        </div>
    </div>
    <div class="home2">
        Ха-ха
    </div>
    <div class="home3">

    </div>
</main>

.main {
    display: flex;
    flex-direction: column;
}

.main .home {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #FF0000;
    color: #FFFFFF;
}

.main .home .image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.main .home .quote {
}

.main .home .quote a {
    font-size: 24px;
}

谢谢！

html

1 个回答

  1. Best Answer

    我不认为这正是我需要的？

    需要为图像指定宽度或最大宽度限制

    我不确定解决方案的正确性，因为我不太明白这个问题

    而且主要是标签是block，占据了整个宽度，.text需要block或者限制宽度或者加一个text-align: center;

    .main{
    background-color: #FF0000;
    color: #FFFFFF;
}

.home{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.quote{
  display: flex;
  align-items: center; /* центр по вертикали*/
  justify-content: center;
  border: 1px solid black;
}

.text{
  max-width: 60%; /* Нужно задать ширину блока так как a по умолчанию блочный элемент, без этого можно указать просто text-align: center; */
  background-color: green;
}


.home .image{
  display: flex;
  justify-content: flex-end;
  width: 50%; /* нужно задать ширину фотографии!*/
  
  border: 1px solid black;
}

img{
  width: 100%;
  height: auto;
}

.main .home .quote a {
    font-size: 24px;
}
    <main class="main">
    <div class="home">
        <div class="quote">
            <div class="text">
                <a>Здесь какой-то мой текст</a>
            </div>
        </div>
        <div class="image">
            <img src="https://aproekt.ucoz.net/12/man-with-mic-02.png" alt="main home background image">
        </div>
    </div>
    <div class="home2">
        Ха-ха
    </div>
    <div class="home3">

    </div>
</main>

    UPD：为清晰起见为块添加了文本背景和边框，删除了填充

    • 1

相关问题