Question

如何将两个div放在一起？

＆＃13;

.web-info-header-left{
  width:20px;
  height:50px;
  padding: 2px 15px;
  float:left;
  background: #1798e5;
  display:flex;
  align-items: center;
  color:white;
}
.web-info{
  display: inline-block;
  background:#1799e3;
  width:100%;
  padding: 5px 5px;
  color:white;
}
.container{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

＆＃13;

  <div class="container">
    <div class="web-info-header-left">
      <i class="material-icons">&#xE031;</i>
    </div>
  <div class="web-info">
    Click here to read about the changes that came in the new design update.
  </div>
</div>
<style>

＆＃13;

Codepen链接： https://codepen.io/audn/pen/BZEMxd

Answer 1

您应该在容器上使用Display: flex，在子Flex中使用div属性。

WITH FLEX

＆＃13;

.web-info-header-left {
  padding: 10px;
  flex: 1;
  /* CHANGE AS PER YOU REQUIRED */
  background: #1798e5;
  text-align: center;
  color: white;
}

.web-info {
  display: inline-block;
  background: #1799e3;
  flex: 9;
  /* CHANGE AS PER YOU REQUIRED */
  padding: 5px 5px;
  color: white;
}

.flex-class {
  display: flex;
  /* CORRECT PLACE FOR FLEX */
}

.container {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="container flex-class">
  <div class="web-info-header-left">
    <i class="material-icons">&#xE031;</i>
  </div>
  <div class="web-info">
    Click here to read about the changes that came in the new design update.
  </div>
</div>
<style>

＆＃13;

没有FLEX

.web-info-header-left {
  padding: 10px;
  width: 10%;
  background: #1798e5;
  text-align: center;
  color: white;
  line-height: 2;
}

.web-info {
  width: 90%;
  background: #1799e3;
  padding: 5px 5px;
  color: white;
}

.flex-class {
    display: inline-flex;
}

.container {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

尝试以下代码，您需要将 display：flex; 提供给 .container 。

＆＃13;

.container{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
}

.web-info-header-left{
  width:20px;
  height:50px;
  padding: 2px 15px;
  float:left;
  background: #1798e5;
  display:flex;
  align-items: center;
  color:white;
}
.web-info{
  display: inline-block;
  background:#1799e3;
  width:100%;
  padding: 5px 5px;
  color:white;
  display:flex;
  align-items: center;
}

＆＃13;

<div class="container">
    <div class="web-info-header-left">
      <i class="material-icons">&#xE031;</i>
    </div>
  <div class="web-info">
    Click here to read about the changes that came in the new design update.
  </div>
</div>

＆＃13;

Answer 3

＆＃13;

<div class="container">
    <div class="web-info-header-left">
      <i class="material-icons">&#xE031;</i>
      
<div class="web-info">
    Click here to read about the changes that came in the new design update.
</div>


</div>
  
</div>

＆＃13;

SELECT WEEK.*
     , MONTH.MONTHLY
FROM (SELECT tour_id
     , WEEK(tour_date) week
     , YEAR(tour_date) year
     , SUM(amount) WEEKLY
     FROM TOUR
     GROUP BY tour_id , WEEK(tour_date), YEAR(tour_date)) WEEK 
INNER JOIN (SELECT tour_id
                 , YEAR(tour_date) year
                 , MONTH(tour_date) month
                 , SUM(amount) MONTHLY
            FROM TOUR
            GROUP BY tour_id , MONTH(tour_date), YEAR(tour_date)) MONTH ON WEEK.tour_id = MONTH.tour_id AND WEEK.year = MONTH.year

＆＃13;

Answer 4

在.web-info类中使用 display：block 样式而不是 display：inline-block

Answer 5

总是简化，简化，然后再简化一下。对于flexbox布局，您需要开始考虑行和列：

我的容器是列的行还是行的行？
子元素列的行或行的行或只是简单的弯曲容器？

仅这两个问题就可以让你的灵活生活变得更加轻松。

查看我的评论代码，其中我将共享代码移动到一个规则块并简化了代码。

如果需要，请询问更多信息。

/* parent/child shared rules */
.container, .web-info-header-left, .web-info {
    display: flex;  /* make them all flexible containers, default "row nowrap" */

    /* center content */
    justify-content: center; /* horizontal */
    align-items    : center; /* vertical   */

    background:#1799e3; color:white;
}

/* PARENT ROW */
.container { /* a row of two columns */
    max-width: 750px; /* maximum container width */
    margin: 0 auto;   /* center horizontally in parent */
}

/* CHILD COLUMNS */
/* align-self = auto, which makes children stretch to given space */
.web-info-header-left { /* column 1: fixed width/height */
    width : 50px; /* a nice little square */
    height: 50px;
}
.web-info { /* column 2: flexible width/height */
    flex: 1; /* fill remaining parent space (flex-grow, default "0") */
}

/* DEBUG */
*   { outline: 1px dashed } /* show element outlines for debug, remove when done */

<div class="container">
    <div class="web-info-header-left" ><i class="material-icons">&#xE031;</i></div>
    <div class="web-info">Click here to read about the changes that came in the new design update.</div>
</div>

Answer 6

由于您在其他地方使用固定宽度设置，只需将width的{{1}}更改为690px：

（容器的750减去2 x 5 px .web-info s填充减去2 x 15 px .web-info s填充减去20px .web-info-header-left s宽度：得到690px）< / p>

查看完整页面模式 - 片段宽度小于750px并将截断容器....

或者看看codepen：https://codepen.io/anon/pen/dRLLdQ

＆＃13;

.web-info-header-left

＆＃13;

.web-info-header-left{
  width:20px;
  height:50px;
  padding: 2px 15px;
  float:left;
  background: #1798e5;
  display:flex;
  align-items: center;
  color:white;
}
.web-info{
  display: inline-block;
  background:#1799e3;
  width:690px;
  padding: 5px 5px;
  color:white;
}
.container{
  max-width:750px;
  margin-left:auto;
  margin-right:auto;
}

＆＃13;

如何通过display显示两个div：flex在第一个div上？

6 个答案: