gpt4 book ai didi

html - 将两个 div 放在同一行会使第一个开始低于应有的位置

转载 作者:太空宇宙 更新时间:2023-11-04 05:47:46 25 4
gpt4 key购买 nike

我想在同一行有 2 个 div,一个有标题,一个是 <hr>另一个带有可以单击以转到另一个页面的图像(即使我删除了链接,问题仍然存在)。我的期望是,执行此代码时,我会得到第一个从左上角开始的代码,然后是图像,而不是第一个 <div>。只是随机开始。

#zonaTitlu {
width: 300px;
height: 200px;
display: inline-block;
background-color: red;
}

#zonaImagine {
width: 400px;
height: 400px;
display: inline-block;
}

.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}

.logo {
width: 400px;
height: auto;
}
<body style="background-color:LightGray">
<div id="zonaTitlu">
<p>
<h3>Welcome to LOL Tournaments</h3>
</p>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine">
<a href="https://eune.leagueoflegends.com/ro/">
<img class="logo" src="lol-logo.jpg" alt="LOL logo">
</a>
</div>
</body>

最佳答案

如果你想要两个 div 并排意味着试试这个并将图像宽度更改为 100%

.zona{
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#zonaTitlu {
width: 50%;
height: 200px;
display: inline-block;
background-color: red;
}

#zonaImagine {
width: 50%;
height: 400px;
display: inline-block;
}

.LinieTitlu {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: 50px;
border-style: inset;
border-width: 2px;
border-color: darkgrey;
}

.logo {
width: 400px;
height: auto;
}
<body style="background-color:LightGray">
<div class="zona">
<div id="zonaTitlu">
<h3>Welcome to LOL Tournaments</h3>
<hr class="LinieTitlu">
</div>
<div id="zonaImagine">
<a href="https://eune.leagueoflegends.com/ro/">
<img class="logo" src="lol-logo.jpg" alt="LOL logo">
</a>
</div>
</div>
</body>

关于html - 将两个 div 放在同一行会使第一个开始低于应有的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58564980/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com