Question

我遇到的一个问题最好是由一个要连接的线框代表。我需要一种构造页面的方法，以使注册区域（线框中具有输入字段的区域）大于页面左侧的区域（图片将显示在该较小区域中）。

问题：最好的方法是使用尽可能简单的HTML和CSS？

我的尝试：我尝试了一种可能的方法，但这只是具有margin-top CSS属性的黑客。

        * {
            /* box-sizing: border-box; */
          }
    
          .row {
            background-color: transparent;
            margin: auto;
            width: 75%;
          }
    
          /* Create two equal columns that floats next to each other */
    
          .column {
            float: left;
            width: 50%;
            padding: 10px;
            /* height: 200%; */
          }
    
          /* Clear floats after the columns */
    
          .row:after {
            content: "";
            display: table;
            clear: both;
          }
    
          #c1 {
            background-color: #aaa;
            width: 30%;
            margin-top: 4%;
            margin-bottom: 5%;
          }
    
          #c2 {
            /* width: 60%; */
            background-color: #bbb;
          }

<body style="background-color:#ddc;">
  <h2>Two Equal Columns</h2>
  <div class="row">
    <div class="column" id="c1">
      <h2>Column 1</h2>
      <p>Some text..</p>
    </div>
    <div class="column" id="c2">
      <h2>Column 2</h2>
      <p>Some text..</p>
      <p>Some text..</p>
      <p>Some text..</p>
    </div>
  </div>
</body>

Answer 1

有很多方法可以做到这一点，但这是一种潜在的方法。希望会有所帮助：）

根据要求进行一些解释：

这里要了解的关键是CSS属性显示，文本对齐和垂直对齐。

显示：inline-block;告诉他们应该并排放置的元素

vertical-align：告诉元素它们应该在容器内垂直居中

text-align：center;告诉容器将内联块元素放在内部居中。

font-size：0;只是因为内联块增加了一个神秘的空间。

那真的是很简单的解释，但是我建议去w3schools复习一下他的财产和行为。 https://www.w3schools.com/

div {
  border: 1px solid #000;
}

.row {
 padding: 10px;
 text-align: center;
 display: block;
 font-size: 0;
}


.small {
 display: inline-block;
 width: 200px;
 height: 200px;
 vertical-align: middle;
 font-size: 12px;
}

.large {
 display: inline-block;
 width: 200px;
 height: 300px;
 vertical-align: middle;
 font-size: 12px;
}

<div class="row">
  <div class="small">a</div>
  <div class="large">b</div>
</div>

Answer 2

proc sql noprint;
select name, catt('new_', name) into :list1 separated by " ", :list2 separated by " "
from sashelp.class;
quit;

%put &list1.;
%put &list2.;

Answer 3

这是一个使用flexbox的简单示例：

.container {
  display: flex;
  align-items: center;
  width:100%;
  min-height:100px;
  justify-content: center;
  background-color:#d9d9ff;
}

.small{
  background-color:#caffff;
  flex: .25;
}
.big{
  padding:1rem 0 1rem 0;
  background-color:#f5c0c0;
  flex: .25;
}

<div class="container">
  <div class="small">Small</div>
  <div class="big">Big</div>
</div>

Answer 4

一个人可以使用 flexbox 。垂直和水平将列居中：

.vh {
  justify-content: center;
  align-items: center;
}

总计

* {
  /* box-sizing: border-box; */
}

body {
  background: #ddc;
}

.row {
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}


/* Create two equal columns that floats next to each other */

.column {
  width: 50%;
  padding: 10px;
  /* height: 200%; */
}


/* Clear floats after the columns */

#c1 {
  background-color: #aaa;
}

#c2 {
  /* width: 60%; */
  background-color: #bbb;
}

<h2>Two Equal Columns</h2>
<div class="row">
  <div class="column" id="c1">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" id="c2">
    <h2>Column 2</h2>
    <p>Some text..</p>
    <p>Some text..</p>
    <p>Some text..</p>
  </div>
</div>

定位HTML div，使其一个比另一个小

4 个答案:

总计