Question

＆＃13;

    .row {
        display: flex;
    }
    
    .col {
        flex: 1;
    }
    
    .container {
        display: flex;
        align-items: center;
        background-color: blue;
        font-size: 12px;
        color: #87909A;
        width: 275px;
        margin-top: 20px;
        margin-left: 20px;
        height: 70px;
    }
    
    .textview {
        height: 50px;
        line-height: 35px;
        padding-left: 13px;
        position: relative;
        border-bottom: 1px solid #CFD4D9;
        background-color: #FFF;
        color: #5C6570;
        padding-right: 13px;
        margin-left: 20px;
        vertical-align: middle;
        display: inline-block;
    }
    
    .middle {
        vertical-align: middle;
    }

＆＃13;

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="event.css">
        </head>
    
        <body>
            <div class="row">
                <div class=".col">
                    <img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;">
                </div>
                <div class=".col">
                    <div class="container">
                        <div class="textview">
                            <span class="middle">Some text</span>
                        </div>
                        <div class="textview">
                            <span class="middle">Some text</span>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

＆＃13;

我想创建一个这样的视图，但我有类似的东西吗？有人可以告诉我如何将白色容器视图置于蓝色背景中心，以及如何将文本置于白色容器视图中心。

如果这是实现下面布局的正确方法，您还可以给我一般反馈吗？我想创建并排视图，其中地图为70％，右侧占30％。

Answer 1

只需添加以下css更改，然后从html中的.类中删除col。

如果您需要该地图，则会占用70%，然后使用两个单独的divs，例如col-1和col-2，并为其分配.col-1 {flex:1 0 70%;}和col-2 {flex:1 0 30%;}我添加了小提琴以便更好地理解。

<强> Fiddle link

.container {
        display: flex;
        align-items: center;
        justify-content:center; /* Added */
        background-color: blue;
        font-size: 12px;
        color: #87909A;
        width: 275px;
        margin-top: 20px;
        margin-left: 20px;
        height: 70px;
    }

    .textview {
        height: 50px;
        line-height: 35px;
        padding-left: 13px;
        position: relative;
        border-bottom: 1px solid #CFD4D9;
        background-color: #FFF;
        color: #5C6570;
        padding-right: 13px;
        margin-left: 20px;
        vertical-align: middle;
        display: inline-flex; /* Added */
        justify-content:center; /* Added */
        align-items:center; /* Added */
    }

.row {
  display: flex;
}

.col {
  flex: 1;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  font-size: 12px;
  color: #87909A;
  width: 275px;
  margin-top: 20px;
  margin-left: 20px;
  height: 70px;
}

.textview {
  height: 50px;
  line-height: 35px;
  padding-left: 13px;
  position: relative;
  border-bottom: 1px solid #CFD4D9;
  background-color: #FFF;
  color: #5C6570;
  padding-right: 13px;
  margin-left: 20px;
  vertical-align: middle;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.middle {
  vertical-align: middle;
}

<div class="row">
  <div class="col">
    <img src="map.png" style="height: 300px; width: 300px; margin-top: 20px;">
  </div>
  <div class="col">
    <div class="container">
      <div class="textview">
        <span class="middle">Some text</span>
      </div>
      <div class="textview">
        <span class="middle">Some text</span>
      </div>
    </div>
  </div>
</div>

Answer 2

试试这个：

<style>
body, .container{
    margin:0px;
    padding:0px;
    }
.col-1{ width:70%;
        float:left;
      }
.col-2{ width:30%;
        float:left;
      }

如果上面的代码不起作用。尝试将宽度调整为68％-30％或65％-30％

Answer 3

将带有textview类的两个div放入父div中。然后给父div一个margin:auto

<div class="parent" style="margin: auto;">
        <div class="textview">
            <span class="middle">Some text</span>
        </div>
        <div class="textview">
            <span class="middle">Some text</span>
        </div>
</div>

CSS

.parent {
 margin:auto;
}

Answer 4

使用bootstrap更容易。

导入bootstrap到你的头和css

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css">
    <style type="text/css">
        .items{
            height: 60px;background-color: white;
            margin-top: 30px;
        }
        .col1{
            height: 400px;
            background-color: blue;
        }
        .col2{
            height: 400px;
            background-color: red;
        }
    </style>
</head>

然后尝试阅读关于Bootstrap Grid soo easy

<div class="container">
    <div class="row">
        <div class="col-md-7 col1">
            <p>Text</p>
        </div>

        <div class="col-md-4 col2" >
            <div class="items">
                <p>tex text text</p>
            </div>
            <div class="items">
                <p>tex text text</p>
            </div>
            <div class="items">
            <p>tex text text</p>
            </div>
        </div>
    </div>
</div>

应该看看你想要的 ![enter image description here ] 1

Div没有扩展文字

4 个答案: