我如何在我的css代码中重新定位div框和标题？

amrnrhlw 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(118)

我想把matcha img移到右边，并把文本放在它们下面。我试着使用margin-left和margin-bottom，但没有帮助。

#hotlatte img {
  border: solid #664d00;
  border-width: 5px;
  border-radius: 60px;
  width: 300px;
  height: 400px;
  padding: 10px;
}

#matcha img {
  border: solid #664d00;
  border-width: 5px;
  border-radius: 60px;
  width: 300px;
  height: 400px;
  padding: 10px; 
}

.namesofdrinks { 
  font-style: italic;
  font-size: 28px;
  color: #804500 ;
  font-family:'Courier New', Courier, monospace;
}

<div id="hotlatte">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Latte_art_3.jpg/1920px-Latte_art_3.jpg" alt="coffe latte" />
</div>

<h3 class="namesofdrinks">Coffe latte</h3>

<div id="matcha">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Matcha_%286328677556%29.jpg/1920px-Matcha_%286328677556%29.jpg" alt="matcha">
  <h3 class="namesofdrinks">Matcha Coffe</h3>  
</div>

css

来源：https://stackoverflow.com/questions/75349265/how-can-i-relocate-the-div-boxes-and-the-titles-in-my-css-code

1条答案

按热度按时间

f0ofjuux1#

首先，需要使用div对图像和文本进行分组。

<div id="hotlatte">
        <img src="images/caffe.jpg" alt="coffe latte" />
        <h3 class="namesofdrinks"> Coffe latte</h3>
    </div>

    <div id="matcha">
        <img src="images/matcha.jpg" alt="matcha">
        <h3 class="namesofdrinks"> Matcha Coffe</h3>  
    </div>

然后试试这个CSS代码。

#hotlatte {
            float: left;
            width: 50%;
        }

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

        #matcha {
            float: right;
            width: 50%;
        }

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

        .namesofdrinks {
            clear: both;
            text-align: center;
            margin-top: 10px;
        }

赞(0）回复(0）举报 2023-02-06

我来回答

我如何在我的css代码中重新定位div框和标题？

1条答案

相关问题

热门标签

最新问答