css搞砸了（自动高度）

-1

我有一个CSS风格的问题。它发生在我将高度设置为自动时website css搞砸了（自动高度）

通过diung访问实时视图this go to newproject.comli.com/post.php使用用户名=闪亮密码= asdfgh123登录，然后手动转到newproject.comli.com /details.php

所以我的div高度设置为0不知道为什么。我在说#itemsCategListsform有人可以帮我吗？这里是我的代码：

<div id="itemsCategListsform"> 
    <div id="plink"> 
     <div id="open">My details</div> 
     <div id="closed"><a href="ads.php">My ads</a></div> 
     <div id="closed"><a href="fav.php">Favorites</a></div> 
    </div> 
    <div id="pbase"> 
     <div id="detailforms"> 
      <p> Email: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
       <input type="email" name="email" size="30"> 
       <input class="submit-buttonform" type="submit" name="updateemail" value="Update Email"> 
       </form> 
      </p> 
      <p> 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        Password: <br> 
        <input type="password" name="password" size="30"><br> 
        Re-Password: <br> 
        <input type="password" name="repassword" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatepassword" value="Update password" > 
       </form> 
       </p> 
       Phone: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        <input type="text" name="phone" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatephone" value="Update phone"> 
       </form> 
       Website: 
       <form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post"> 
        <input type="text" name="website" size="30"> 
        <input class="submit-buttonform" type="submit" name="updatewebsite" value="Update website"> 
       </form> 
      </div> 
     </div> 
    </div>

和css：

#itemsCategListsform { 
    background-color: white; 
    position: relative; 
    width: 930px; 
    height: auto; 
    left: 175px; 
    top: 20px; 
    border-radius: 4px; 
    border: 1px solid #1a171a; 
    padding-top: 40px; 
    padding-left: 70px; 
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6); 
} 

#plink { 
    position: relative; 
    width: 200px; 
    float: left; 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    z-index: 10; 
    border-radius: 4px 0 0 4px; 
    -webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    -moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 

} 
#open { 
    border-bottom: 1px solid black; 
    border-right: 1px solid #fbfbfe; 
    text-align: center; 
    line-height: 50px; 
    background-color: #fbfbfe; 
} 
#closed { 
    border-bottom: 1px solid black; 
    width: 200px; 
    text-align: center; 
    line-height: 50px; 
} 
#pbase { 
    border: 1px solid black; 
    background-color: #fbfbfe; 
    position: relative; 
    width: 600px; 
    height: auto; 
    float: left; 
    margin-left: -1px; 
    border-radius: 0px 4px 4px 4px; 
    -webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    -moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6); 
    box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.6); 
} 

#closed:hover a { 
    display: block; 
    background-color: #fbfbfe; 
    border-right: 1px solid black; 
} 


#open:hover a { 
    display: block; 
} 

#detailforms { 
    position: relative; 
    margin:0 auto; 
    top: 10px; 
    width: 450px; 
    height: auto; 
    margin-bottom: 40px; 
}

来源

2015-12-16 Egi Dijus

你有一个网站的实时链接？在现场环境中使用CSS比在屏幕截图中进行诊断要容易一些。这也可能会暴露提供的CSS之外的问题，可能会导致您的问题。 – Liam

嗯不真实sorr我没有在我的主机上设置mysql，所以它给出吨错误，你可能不会理解任何东西，现在尝试设置 –

你可以创建一个https://jsfiddle.net/（或其他最小可验证的例子）？否则我必须将问题标记为无法复制。 –

因为孩子元素是浮动的高度注册为0的CSS。 CSS float从内容流中取出一个元素并在其周围包装内联元素。

你的问题是在这里：

<div id="itemsCategListsform"> 
    <div id="plink"> 
    ... 

#plink{ float: left; } 
#phase{ float: left; }

我建议你用clear: both集父后添加一个伪元素。

<div id="itemsCategListsform" class="clearfix"> 
    <div id="plink"> 
    ... 

.clearfix:after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
}

See some additional solutions here.

来源

2015-12-16 20:07:48 DACrosby

添加display: inline-block到itemsCategListsform :)

来源

2015-12-16 20:07:23

好与DACrosby的帮助，他说，因为浮动的留下，解决我刚才添加溢流容易解决：汽车;告诉我，如果我做得好或有更好的解决方案因为这很容易，似乎一切都好所有

来源

2015-12-16 20:12:13

css搞砸了（自动高度）

回答

相关问题