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的

回答

相关问题