CSS表格單元格上有div的

的空間，我有以下的html代碼：CSS表格單元格上有div的

.container { 
 
     display: table; 
 
     width: 100%; 
 
     height: 100%; 
 
     } 
 
    
 
     .menu-container { 
 
     width: 150px; 
 
     height: 100%; 
 
     background: #1b1b1b; 
 
     color: #fff; 
 
     display:table-cell; 
 
     } 
 
    
 
     .menu-container h1 { 
 
     margin: 0px; 
 
     width: 100%; 
 
     padding: 5px 0px 5px 15px; 
 
     background: #171717; 
 
     font-weight: 600; 
 
     } 
 
    
 
     .main-container { 
 
     width: auto; 
 
     display:table-cell; 
 
     box-shadow: -10px 0px 40px -10px #000000; 
 
     } 
 
    
 
    .container-header { 
 
      width: 100%; 
 
      background: red; 
 
     }

<div class="container"> 
 
    <div class="menu-container"> 
 
    <h1>Browse</h1> 
 
    <menu-container></menu-container> 
 
    </div> 
 
    <div class="main-container"> 
 
    <div> 
 
     <div class="container-header">some text</div> 
 
     random text 
 
    </div> 
 
    </div> 
 
</div>

這裏它的外觀：

screenshot1

正如你可以看到有是「某些文本」元素之前的空格。我不想要額外的空間，我希望元素在其容器的頂部開始。我嘗試了一些竅門，例如margin-top：-Xpx，但它不起作用。我怎樣才能解決這個問題？

來源

2017-05-16 tekengodz

這是你想要的嗎？

只需在container上使用display:flex即可。

.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    display:flex; 
 
} 
 

 
.menu-container { 
 
    width: 150px; 
 
    height: 100%; 
 
    background: #1b1b1b; 
 
    color: #fff; 
 
    display: table-cell; 
 
} 
 

 
.menu-container h1 { 
 
    margin: 0px; 
 
    width: 100%; 
 
    padding: 5px 0px 5px 15px; 
 
    background: #171717; 
 
    font-weight: 600; 
 
} 
 

 
.main-container { 
 
    width: 100%; 
 
    display: table-cell; 
 
    box-shadow: -10px 0px 40px -10px #000000; 
 
} 
 

 
.container-header { 
 
    width: 100%; 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="menu-container"> 
 
    <h1>Browse</h1> 
 
    <menu-container></menu-container> 
 
    </div> 
 
    <div class="main-container"> 
 
    <div> 
 
     <div class="container-header">some text</div> 
 
     random text 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-16 11:04:34 Sankar

請檢查。

.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 

 
    .menu-container { 
 
    width: 20%; 
 
    height: 100%; 
 
    background: #171717; 
 
    color: #fff; 
 
    display: table-cell; 
 
    float: left; 
 
    } 
 

 
    .menu-container h1 { 
 
    margin: 0px; 
 
    width: 100%; 
 
    padding: 5px 0px 5px 15px; 
 
    font-weight: 600; 
 
    } 
 

 
    .main-container { 
 
    width: auto; 
 
    display: table-cell; 
 
    box-shadow: -10px 0px 40px -10px #000000; 
 
    float: left; 
 
    width: 80%; 
 
    } 
 

 
.container-header { 
 
     width: 100%; 
 
     background: red; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
      <div class="menu-container"> 
 
      <h1>Browse</h1> 
 
      <menu-container></menu-container> 
 
      </div> 
 
      <div class="main-container"> 
 
<div><div class="container-header">some text</div> 
 
    random text 
 
</div> 
 
      </div> 
 
     </div> 
 

 
</body> 
 
</html>

希望它能對你有幫助。

謝謝。

來源

2017-05-16 11:07:42

不改變顯示屬性的另一種可能的解決方案：

.main-container { 
    width: auto; 
    vertical-align: top; // <= 
    display: table-cell; 
}

來源

2017-05-16 11:14:51 ErTR

謝謝，這工程太 – tekengodz

CSS表格單元格上有div的

回答

相關問題