將橙色框和文本對齊到影像的右側

我希望橙色框（和文本）與影像右側對齊。我已經在幾個不同的地方移動了位置、顯示和浮動，但我似乎無法將它放在正確的位置。我已經在頁面頂部有一個導航欄（我沒有包括在內）。不知道我還需要說什么，我是新手...

我的 HTML

<div>
     <div class="image2"><img src="./images/PhotobyeberhardgrossgasteigerfromPexelsBW.jpg" alt="background picture2"
                width="1100">
     </div>
     <div class="boxes">
         <div class="box-1"><a href="./about.html">about</a></div>
         <div class="box-2"><a href="./portfolio.html">portfolio</a></div>
         <div class="box-3"><a href="./contact.html">contact</a></div>
     </div>
    </div>

我的 CSS

* {
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
}

/*--background image--*/

.image2 {
  position: relative;
}

.image2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 72.5%;
  height: 100%;
  display: inline-block;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 255, 183, 0.49653364763874297)),
    color-stop(50%, rgba(243, 255, 174, 0.4797269249496674)),
    color-stop(100%, rgba(245, 225, 72, 0.5413515748096114))
  );
}

/*--right side boxes--*/

.boxes {
  text-align: center;
  float: right;
  background-color: orange;
  width: 370px;
  padding: 20px;
  font-size: 30px;
}

.boxes a {
  text-decoration: none;
  color: white;
}

.boxes a:hover {
  color: aquamarine;
  transition: 1s;
}

.box-1 {
  color: #121212;
  background-color: white;
  padding: 50px;
}

.box-1 a {
  color: #121212;
  background-color: white;
  padding: 50px;
}

.box-2 {
  color: white;
  padding: 50px;
  background-color: #121212;
}

.box-3 {
  color: white;
  padding: 50px;
  background-color: #121212;
}

`

uj5u.com熱心網友回復：

你可以使用flexbox，它讓它變得如此簡單。沒有得到你想要的最終布局，但就將橙色框（和文本）對齊到影像的右側，你可以這樣做：

* {
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
}
.container{
  display:flex;
}
/*--background image--*/

.image2 {
  position: relative;
}

.image2:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0px;
  width: 72.5%;
  height: 100%;
  display: inline-block;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(0, 255, 183, 0.49653364763874297)),
    color-stop(50%, rgba(243, 255, 174, 0.4797269249496674)),
    color-stop(100%, rgba(245, 225, 72, 0.5413515748096114))
  );
}

/*--right side boxes--*/

.boxes {
  text-align: center;
  float: right;
  background-color: orange;
  width: 370px;
  padding: 20px;
  font-size: 30px;
}

<div class="container">
  <div class="image2"><img src="https://images.unsplash.com/photo-1646361701353-139ad5fab84e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" >
  </div>
  <div class="boxes">
    <div class="box-1"><a href="./about.html">about</a></div>
    <div class="box-2"><a href="./portfolio.html">portfolio</a></div>
    <div class="box-3"><a href="./contact.html">contact</a></div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以通過設定style="display: flex"頂部 div 來做到這一點；flex 還提供了該點的定位，因此您可以將第二個子 div 中的文本垂直對齊align-items，例如align-items: center.

<!-- <div style="display: flex; align-items: center"> -->
<div style="display: flex">
  <div class="image2"><img src="https://images.unsplash.com/photo-1646361701353-139ad5fab84e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" >
  </div>
  <div class="boxes">
    <div class="box-1"><a href="./about.html">about</a></div>
    <div class="box-2"><a href="./portfolio.html">portfolio</a></div>
    <div class="box-3"><a href="./contact.html">contact</a></div>
  </div>
</div>

標籤：html css

上一篇：如何從表中洗掉特定行？

下一篇：如果螢屏低于750像素（引導程式），如何制作div最大寬度？