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搞砸了（自動高度）

回答

相關問題