我想在同一行有 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/