时间戳

首页 > 解决方案 > 显示块不工作没有浮动清除两者

css - 显示块不工作没有浮动清除两者

问题描述

我希望我的超人在上划线下方，只要超人如此，超人始终是一条线，我希望容器能够伸展。这太紧张了哈哈哈。我通读了大多数 SO 问题，告诉我要清除并清除两者，我知道 div 默认阻止我不知道该怎么做。哭哭。对不起，如果这是重复的或我来自 Photoshop Island 的任何内容。

    body {background-color: darkslategrey;}
    
    .img
            {
                 display:inline-flex;
                 width:50;
                 height:50;
                 margin: auto; 
            }
    .overline
            {    display: inline-block; 
                 vertical-align:top; 
                 font-family: 'Helvetica'; 
                 padding-left: 5px;
                 padding-top: 5px;
                 font-size: .75em; 
                 text-transform: uppercase;
                 letter-spacing: 1.5px;
                 height: auto;    
            }
    
    .content
            {    display: inline-block; 
                 vertical-align:bottom; 
                 font-family: 'Helvetica'; 
                 padding-left: 5px;
                 padding-top: 5px;
                 font-size: 1em; 
                 text-transform: uppercase;
                 letter-spacing: 1.5px;
                 height: auto;
            }
    .container
            {
                display:inline-flex; 
                background-color: #fff; 
                vertical-align: top; 
                margin: auto; 
                width: 200px;
                height: 50px;
                
            }
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
<img src="https://user-images.githubusercontent.com/13046668/41792152-165b8206-7682-11e8-8182-dad5d193b494.png" class="img"><!--
--><div class="container">   
    <div class="overline" style="clear: both">overline</div> 
    <br>
    <div class="content" style="clear: both">superman is back</div>
</div> 
</body>
</html>

标签： css

解决方案

在容器 div 上添加 flex-direction: 列

删除了 br 标签。

两者都不需要清楚

删除了容器标签上的宽度

body {
  background-color: darkslategrey;
}

.img {
  display: inline-flex;
  width: 50;
  height: 50;
  margin: auto;
}

.overline {
  display: inline-block;
  vertical-align: top;
  font-family: 'Helvetica';
  padding-left: 5px;
  padding-top: 5px;
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  height: auto;
}

.content {
  display: inline-block;
  vertical-align: bottom;
  font-family: 'Helvetica';
  padding: 5px 5px 0 5px;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  height: auto;
}

.container {
  display: inline-flex;
  background-color: #fff;
  vertical-align: top;
  margin: auto;
  height: 50px;
  flex-direction: column;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <img src="https://user-images.githubusercontent.com/13046668/41792152-165b8206-7682-11e8-8182-dad5d193b494.png" class="img">
  <!--
-->
  <div class="container">
    <div class="overline">overline</div>
    <div class="content">superman is back</div>
  </div>
</body>

</html>

推荐阅读