我正在尝试创建一种由多个 div 组成的窗口。我基本上是在我的 cshtml 页面中将 div 放在 div 之后,并尝试在 .css 文件中设置它们的位置。经过相当大的努力,我设法将 div 设置在它们漂亮的位置。但是,一旦我开始在其中一个 div 中放置文本或 dom 元素或其他任何内容,它就会改变其位置,并推动其他 div,从而造成混乱。我以某种方式设法通过使用浮动来保留一些,但这真的很困难。难道没有一种简单的方法来管理 div 的内部元素吗?为什么 inside 元素会导致容器 div 移动到其他地方?
这是 .html 和 .css 代码。div 为空且位置正确。例如,您可以在 div id="fiyat"> 中简单地写“qwe”,然后看看我在说什么。
.html 代码:
<div id="tablodetay">
<div id="secimler">
</div>
<div id="parcacerceve">
</div>
<div id="resim">
</div>
<div id="ebatsecimvefiyat">
<div id="ebatsecim">
</div>
<div id="fiyat">
</div>
</div>
<div id="urunozellik">
</div>
</div>
.css 代码:
div#tablodetay div#secimler
{
border:1px solid #000000;
margin:2px;
display:block;
width:706px;
height:100px;
display:block;
}
div#tablodetay div#parcacerceve
{
border:1px solid #000000;
margin:2px;
display:inline-block;
width:86px;
height:400px;
}
div#tablodetay div#resim
{
border:1px solid #000000;
margin:2px;
height:400px;
width:400px;
display:inline-block;
}
div#tablodetay div#ebatsecimvefiyat
{
margin:2px;
height:402px;
width:200px;
display:inline-block;
}
div#tablodetay div#ebatsecim
{
border:1px solid #000000;
height:248px;
width:200px;
margin-bottom:2px;
}
div#tablodetay div#ebatsecim form input
{
float:left;
border:1px solid #000000;
}
div#tablodetay div#fiyat
{
border:1px solid #000000;
height:148px;
width:200px;
}
div#tablodetay div#urunozellik
{
border:1px solid #000000;
height:120px;
width:706px;
margin-top:-2px;
margin-left:2px;
}