Question

我希望我的超人在下划线上方，而且我也想让容器伸展，只要超人是如此，那么超人就永远是一行。哈哈哈，好紧张。我通读过大多数SO问题是告诉我clearfix并同时清除这两个问题，而且我知道div默认为阻止状态，我不知道该怎么办了。哭吧。抱歉，如果重复或我来自Photoshop Island。

arr1 = [1,2,2,3,4]
arr2 = [5,2,2,3,6]
# common subset sequence is [2,2,3]

arr1 = [2,2,3,3,5]
arr1 = [3,3,2,2,5]
# common sequences are [2,2] [3,3]

    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;
                
            }

Answer 1

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

删除了br标签。

无需同时清除两者

删除了容器标签上的宽度

for(i=0;i<crypto_sign_PUBLICKEYBYTES;i++)
    printf("%2.2x",pk[i]);
puts("");

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;
}

Answer 2

我认为问题与您的容器的宽度和高度有关。但是，如果您想要的是width:200px;和height:50px;，那么我使它适合该大小。

为了使这段代码看起来更简洁，我做了很多更改。重要的是：

将图像添加到容器div的内部，而不是外部。（这创建了margin:auto;，您将其放置在.container中。因此将容器放置在网页的中心。）不确定这是否是您想要的，但现在可以正常使用。如果您不希望放在中间，那么只需从margin:auto;中取出.container
取出大量不需要的CSS。（或替换为.. EX。display:block;。我将其阻止以确保div从上到下）
在float:left;上添加了.img（这会将您的上划线和内容显示在图像的右侧）

    body {background-color: darkslategrey;}
    
    .img{
      width:50;
      height:auto;
      float:left;
      padding-right:5px;
    }
    .overline{    
      display:block;
      font-family: 'Helvetica'; 
      font-size: .75em; 
      text-transform: uppercase;
      letter-spacing: 1.5px;
      height: auto;
    }
    
    .content{    
      display:block;
      font-family: 'Helvetica'; 
      font-size: 1em; 
      text-transform: uppercase;
      letter-spacing: 1.5px;
      height: auto;
    }
    .container{
      background-color: #fff; 
      margin: auto; 
      width:200px;
      height:50px;
      overflow:hidden;
    }

<!DOCTYPE html5>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
<div class="container">   
  <img src="https://user-images.githubusercontent.com/13046668/41792152-165b8206-7682-11e8-8182-dad5d193b494.png" class="img"/>
  <div class="overline">overline</div> 
  <div class="content">superman is back</div>
</div> 
</body>
</html>

显示块不起作用无浮动清除两者

2 个答案: