个人中心
gpt4 book ai didi

html - 如何使用 flexbox 垂直定位 2x div

转载 作者：太空狗 更新时间：2023-10-29 15:05:04 25 4
gpt4 key购买 nike

我正在尝试使用 flexbox 将“距离”和“持续时间”文本垂直放置在各自 div 的中心，我似乎无法让它工作。我还将把它应用到“卡路里”和“分享”文本中。

我还想使用 flexbox 在中间列中垂直放置我的 4x 链接。

enter image description here

Codepen demo

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Runna - Track your run!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/js.js"></script>
</head>
<body>
    <div id="main-wrapper">

        <div id="head-bar">
            <img class="logo" src="imgs/logo-blue.png">
        </div>
        <div id="map-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
        </div>
        <div id="control-container">
            <div class="left-col">
                <div class="distance-wrapper">
                    <div class="distance-title bold-title">DISTANCE:</div>
                    <div class="distance-figure">1.7KM</div>
                </div>  

                <div class="duration-wrapper">
                    <div class="duration-title bold-title">DURATION</div>
                    <div class="duration-figure">10.42MINS</div>
                </div>      
            </div> <!-- End of left col -->
                <div class="middle-col">
                    <ul>
                        <li class="arrow"><a href="#" class="arrowbutton"><i class="fa fa-chevron-down"></i></a></li>

                        <li><a href="#">START</a></li>
                        <li><a href="#">STOP</a></li>
                        <li><a href="#">PAUSE</a></li>
                    </ul>

                </div>


            <div class="right-col">
                <div class="calorie-wrapper">
                    <div class="calories bold-title">CALORIES</div>
                    <div class="calories-result">100 cal's</div>
                </div>
                <div class="share-wrapper">
                    <div class="share bold-title">SHARE</div>
                    <div class="share-icons">FB or Twitter</div>
                </div>

            </div> <!-- End of right col -->

        </div>

    </div>
</body>
</html>

CSS:

html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    height: 100%;
    font-family: 'Lato', sans-serif;
}

#main-wrapper {
    height: 100vh;
}

@media all and (max-width: 40em) {
    #head-bar {
        background: black;
        width: 100%;
        height: 5vh;


    }

    .logo {

        display: block;
        margin: 0 auto;
        height: 85%;

    }

    #map-container {
        background: yellow;
        height: 65vh;
        width: 100%;
    }
}

/***Control columns***/
#control-container {
    width: 100%;
    height: 30vh;
    color: white;
    font-family: 'Lato', sans-serif;
    text-align: center;
    background: #1b1b1b;
    position: relative;



}
.left-col {
    display: flex;
    flex-direction: column;

    width: 33.3%;
    height: 100%;
    /*height: 60px;*/
    float: left;
}


.middle-col {
    background: #151515;
    width: 33.3%;
    height: 100%;
    float: left;
    /*box-shadow: 0 0 8px 2px #000;*/

}
.right-col {

    width: 33.3%;
    float: left;

}

.distance-wrapper, .duration-wrapper {
    flex: 1;
    /*background: #ddd;*/
    border-bottom: 1px solid yellow;
     justify-content: center;


}

.calorie-wrapper, .share-wrapper {
    display: block;
    width: 100%;

}

.bold-title {
    font-weight: 900;
    font-family: 'Lato', sans-serif;
}


/***Middle Navigation***/

.middle-col {

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

}

.middle-col ul {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;

}

.middle-col li {
    list-style-type: none;

}

.middle-col a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 20px;


}

.middle-col a:hover {
    background: green;
    display: block;

}

#control-container:after {
    content: "";
    display: block;
    height: 0;
  clear: both;
}

最佳答案

我用较少的 HTML 创建了这个例子，希望它有更多的语义。

让我们做这个:

Screenshot

HTML

<section class="control-container">
  <dl class="distance">
    <dt>Distance</dt>
    <dd>1.7KM</dd>
  </dl>
  <dl class="duration">
    <dt>Duration</dt>
    <dd>10.42 Mins</dd>
  </dl>
  <dl class="calories">
    <dt>Calories</dt>
    <dd>100</dd>
  </dl>
  <nav class="actions">
    <a href="">Down</a>
    <a href="">Start</a>
    <a href="">Stop</a>
    <a href="">Pause</a>
  </nav>
  <div class="share">
    <h2>Share</h2>
    <a href="">Facebook</a>
    <a href="">Twitter</a>
  </div>
</section>

flex

  • flex <section>容器有 display: flex和 flex-flow: column wrap因此它的子项将排成列并在被推到外面时换行。

  • flex 元素也被赋予了display: flex , flex-flow: column wrap和 justify-content: center;这样文本就垂直居中了。导航给出 flex-direction: row以便它的链接可以与 align-items: center 均匀地垂直居中。

  • 给出占高度一半的4个部分flex: 1 1 50% ;他们每人将获得一半的列高

  • 导航给出flex: 1 1 100%所以它自己会占据一整列

.control-container {
  display: flex;
  flex-flow: column wrap;
}
.control-container > * {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  flex: 1 1 50%;
  width: 33.33%;
  text-align: center;
}
.control-container > nav {
  flex-direction: row;
  align-items: center;
  flex: 1 1 100%;
}
.control-container > nav a {
  flex: 1 1 100%;
}

完整示例

* {
  margin: 0;
  padding: 0;
  font: 100% arial;
}
.control-container {
  display: flex;
  flex-flow: column wrap;
  height: 40vh;
  min-height: 250px;
  min-width: 300px;
  margin: 0 auto;
}
.control-container > * { /* target all direct children */
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  flex: 1 1 50%;
  width: 33.33%;
  text-align: center;
  background: #333;
  color: #FFF;
}
.control-container > nav {
  flex-direction: row;  /* allows vertical centering with align-items: center; */
  align-items: center;
  flex: 1 1 100%;  /* take up entire column */
  background: #000;
}
.control-container > nav a {
  flex: 1 1 100%;  /* 100% pushes each link so they wrap  */
}
/*Change the order of the flex items so the stats can be kept together in the HTML*/
.distance,
.duration,
.actions {
  order: 1;
}
.calories {
  order: 3;
}
.share {
  order: 4;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.control-container dt,
.control-container h2 {
  font-weight: bold;
}
.share h2 {
  margin-top: calc(1em + 15px);  /*push "share" down so it aligns with "duration" 1em accounts for the extra line of text */
}
.control-container a {
  color: #FFF;
  text-decoration: none;
}
dt,
dd,
.share * {
  padding: 5px;
}
iframe {
  width: 100%;
  height: calc(60vh - 104px);
  /*  viewport height minus flex container height and header height ( + there is a stray 4px somewhere)*/
  min-height: 300px;
}
header {
  height: 100px;
  text-align: center;
  background: #000;
}
<div class="wrapper">
  <header>
    <img src="http://www.placehold.it/100" />
  </header>
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>

  <section class="control-container">

    <dl class="distance">
      <dt>Distance</dt>
      <dd>1.7KM</dd>
    </dl>

    <dl class="duration">
      <dt>Duration</dt>
      <dd>10.42 Mins</dd>
    </dl>

    <dl class="calories">
      <dt>Calories</dt>
      <dd>100</dd>
    </dl>

    <nav class="actions">
      <a href="">Down</a>
      <a href="">Start</a>
      <a href="">Stop</a>
      <a href="">Pause</a>
    </nav>


    <div class="share">
      <h2>Share</h2>
      <a href="">Facebook</a>
      <a href="">Twitter</a>
    </div>

  </section>
</div>

关于html - 如何使用 flexbox 垂直定位 2x div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27563142/

25 4 0
文章推荐： c - 推荐保留预处理器指令的 C 前端
文章推荐： android - 如何在 Android 中使用 OSMDroid/OSMBonusPack 处理 map 上的长按？
文章推荐： c - 使用 JSON 数据
文章推荐： android - 如何在android中的文本文件中提供新行？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com