0

我希望我的超人在上划线下方，只要超人如此，超人始终是一条线，我希望容器能够伸展。这太紧张了哈哈哈。我通读了大多数 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>

4

2 回答 2

0

在容器 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>

于 2018-06-25T18:18:44.710 回答
0

我认为这个问题与你的容器的宽度和高度有关。但是，如果它是你想要的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>

于 2018-06-25T19:08:28.540 回答