Question

大家好，我的标头中有一个带有div的标头，但我想在彼此之间显示我的图片，但与其将其显示在彼此下，我如何解决此问题，我试图更改我的css但没有用。

现在我添加注释器div时就这样

现在如何：

我想要这样：

这是我的代码

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html,
body {
  margin: 0;
  height: 120%;
  font-family: 'Josefin Sans', sans-serif;
}

.header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  height: 50vw;
  min-height: 400px;
  max-height: 550px;
  min-width: 300px;
  color: #eee;
}

.header:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
  background: #1B2030 url(https://unsplash.it/1999/999?image=1063) top center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  animation: grow 60s linear 10ms infinite;
  transition: all 0.2s ease-in-out;
  z-index: -2
}

.header a {
  color: #eee
}

.info {
  width: 100%;
  padding: 25% 10% 0 10%;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
}

.author {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(http://favim.com/media/uploads/images/610/140308/black-n-white-cute-funny-iron-man-Favim.com-1462744.jpg) center no-repeat;
  background-size: cover;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 3px
}

.info h4,
.meta {
  font-size: 0.7em
}

.meta {
  font-style: italic;
}

.twtr {
  margin-top: 100px
}

.btn.twtr:after {
  content: "\1F426";
  padding-left: 5px
}

<body>
  <div class="header">
    <div class="info">
      <h1>TestHeader</h1>
      <div class="meta">
        test
      </div>
      <div class="meta">
        <a href="https://twitter.com/nodws" target="_b" class="author"></a><br> By <a href="https://twitter.com/nodws" target="_b">James Nodws</a> on May 30, 2017
      </div>
    </div>
  </div>
</body>

Answer 1

添加：

Stationid  Maintainance Mean
       10          55.666667
       15          38.500000

.meta { display: inline-block }默认为int div模式display，因此它包装了整个ligne。更改为block以允许水平多个div

Answer 2

我认为您应该尝试使用。

data=JSON.parse(params[:delivery_method].to_json) # no exception.

这也将所有.meta { display : flex; }对齐在单个行中

Answer 3

您在这里有两个选择

您可以按照here中的说明使用Bootsrap。
在CSS下方使用

.meta { 向左飘浮; 宽度：30％; }

您可以使用仅适用于图像div的任何其他类。

Answer 4

您首先要清除边缘和填充物以防万一

grep -lR "menuzord.js" * | sort -u

之后，将每个div的宽度设置为25％，并显示内联或内联块

body{padding:0;margin:0;}

Answer 5

您可以将flex属性用于

Display：flex仅将flex布局应用于容器的flex项或子元素。因此，容器本身停留在块级元素上，因此占用了屏幕的整个宽度。 ... Display：inline-flex将flex布局应用于flex项或子元素以及容器本身。

我怎样才能使4个div彼此相邻

5 个答案: