大佬教程收集整理的这篇文章主要介绍了使 HTML <div> 标签不占据页面的整个长度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在制作我自己的网站，我正在用纯 HTML 制作它。我在制作页面时遇到的，我将在下面描述。
这是我的代码供参考：-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sIDediv {
border: 1px outset black;
BACkground-color: white;
text-align: center;
wIDth: 120;
height: 400;
}
</style>
<style>
.maindiv {
border: 1px outset black;
BACkground-color: white;
text-align: left;
wIDth: 400;
height: 300;
}
</style>
<a href="https://ayushbhatt.in"><img src="Ayushlogo.png" alt="logo" height="9.2%" wIDth="9.2%" style="float:left"></a>
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sIDediv">
</div>
<div class="maindiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can vIEw some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</HTML>
我希望带有“maindiv”属性的标签出现在带有“sIDediv”属性的标签的旁边，但它只是不想。
PS : 我想尽可能长时间地只使用 HTML
尝试使用 bootstrap ，它完美地处理布局，这是一个例子：
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
更多细节检查： https://getbootstrap.com/docs/5.0/layout/grid/
注意：您需要包含 bootstrap 和 jQuery 库，查看在线教程以开始使用引导程序
<div> 标签的一个重要特点是它们被称为 "block-level" elements，这特别意味着它们总是从一个新行开始并占据可用的整个宽度，无论如何。考虑到这一点，
写作
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
应该产生一个类 sideDiv 和类中定义的宽度的 div，然后一个类 @H_886_7@mainDiv 的新 div 从新行开始，作为块-level 元素在默认情况下会这样做，但请注意，这同时也是因为 class sideDiv 的 div 作为块级元素占用了页面上的剩余宽度（尽管它的 content 宽度就像类中描述的那样，它是一个块级元素有点像它“保留”其余的宽度，即使它的内容只使用定义的数量），所以下一个元素（块级或内联）可以 仅至少从下一行开始。
如果你想规避这种行为，有很多方法可以做到。正如另一个答案所指出的那样，一种是使用像 bootstrap 这样的外部工具，但我最喜欢的是简单地使用 flex box。这可以通过这种方式为您的代码完成
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
直接覆盖块级属性的方法是为两个 div 设置样式 display: inline-block;，以防止默认情况下从新行开始或占用整个可用宽度。 （只有一个还不够，如果只在第一个上设置，第二个默认还是从新行开始，如果只给第二个设置，第一个仍然默认占用所有可用宽度）。然而，除了可以应用块级高度和宽度的事实之外，这会导致元素被完全视为内联元素，因此可能会很奇怪/难以操作。使用弹性盒通常更容易。代码为
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
但是，请注意 <p> 也是块级元素，因此直接在 @H_886_7@mainDiv div 中替换您的原始代码仍然会导致它在显示之前跳过一行。同样，使用弹性盒通常更容易、更现代、更美观。
编辑：添加了关于块级元素占用所有可用宽度的详细信息，并修复了通过设置display: inline;将显示属性更改为覆盖块级属性的错误初始方法。这可以工作，但它会忽略 <div> 的高度和宽度。
以上是大佬教程为你收集整理的使 HTML <div> 标签不占据页面的整个长度全部内容，希望文章能够帮你解决使 HTML <div> 标签不占据页面的整个长度所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。