Question

我正在尝试创建一种由多个div组成的窗口。我基本上将div放在我的cshtml页面中的div之后，并试图在.css文件中设置它们的位置。经过相当大的努力，我设法将div设置在他们漂亮的位置。但是一旦我开始在其中一个div中放置文本，dom元素或其他内容，它就会改变它的位置，并推动其他div，造成混乱。我以某种方式设法通过使用float来保留一些，但这确实很难。是不是有一种简单的方法来管理div的内部元素？为什么内部元素会导致容器div移动到其他地方？

这是.html和.css代码。 div是空的并且正确定位。你可以简单地在div id =“fiyat”＆gt;里写“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;
}

Answer 1

您需要为每个div定义css属性。为了防止它改变你需要的尺寸或位置

div ... {
   position:absolute;
   left: 50px;
   top:50px;
   width:100px;
   height:50%;
}

的位置是：绝对的;忽略所有其他div并将你的div放在你定义的位置。

Answer 2

如果溢出未设置为无或滚动

，则

宽度和高度被否决

浏览器将使用您的宽度和高度作为起点，而不是终点。

您也可以尝试设置max-width和max-height。

如何防止div改变位置

2 个答案: