股利与文字不

.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; 
 
    }

<!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>

我想创建这样的观点，但我有一些像上面扩大？有人可以让我知道如何将白色容器视图置于蓝色背景中，以及如何将文本置于白色容器视图中。

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

来源

2017-07-25 CapturedTree

'类=”。 col“'可能是一个错字，应该用'class =”col“' – fen1x

你想要2个白框，在蓝色背景中水平居中？看起来你已经将文字置于白框内。 – duyn9uyen

检查更新的答案我添加了一些描述来理解。 – LKG

只需添加下面的CSS变化和col类HTML删除.。

，如果你需要一个地图将占据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>

来源

2017-07-25 17:34:44 LKG

试试这个：

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

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

来源

2017-07-25 17:43:06

将两个div与textview类放入父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; 
}

来源

2017-07-25 17:49:42 duyn9uyen

事情就会更容易使用的引导。

进口引导你的头和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>

然后尝试阅读引导电网洙容易

<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

来源

2017-07-25 17:53:50

股利与文字不

回答

相关问题