Question

我想制作一个标题，我的标识位于左侧，标识位于该标识旁边（标识的右侧），但我希望文本显示在图像的底部而不是顶部。我将如何实现这一目标？

我尝试将标题div设为相对而口号div绝对，但然后将文字写在图像上...

我的HTML：

<html>
<head>
<title>test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container header">
<div class="logo">
    <img src="images/logo.png" alt="Logo" class="img-responsive">
</div>
<div class="slogan">
Lorem ipsum lorem ipsum
</div>

</div>

</body>


</html>

和css：

 body{
        maring:0 auto;
    }

    .logo{
        float:left;
    }

    .slogan{
        float:left;
    }

这是我想要实现的目标的图像：

Answer 1

最简单的选择是为您的口号提供最高利润：

.slogan{
    float:left;
    margin-top: 4px;
}

Answer 2

如果您希望动态调整大小，请让我建议使用flexbox：

＆＃13;

body {
  margin: 0 auto;
}
.logo {
  float: left;
}
.slogan {
  /* float: left; */
  align-self: flex-end;
}
.header {
  display: flex;
  flex-flow: row wrap;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container header">
  <div class="logo">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=100×100&w=100&h=100" alt="Logo" class="img-responsive">
  </div>
  <div class="slogan">
    Lorem ipsum lorem ipsum
  </div>
</div>

＆＃13;

底部旁边的徽标和文字

2 个答案: