将页面分成两列并将它们对齐 HTML

Question

Image我想在标题下方的两栏中显示页面，并按原样居中对齐按钮。

不知道这里有没有漏掉什么div？

我一直在尝试这样做，但它并没有像我预期的那样出现。

<div>
        <div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
        <span>Help us improve Customer Support</span>
        </div>
    <table>
    <tr>
        <td width="50%" class="divText slds-p-bottom--medium leftBtn" >Tell us what you think<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
        <button class="slds-button slds-button--neutral">
        <span class="btn-feedback">Provide feedback</span>
        </button>
        </div>
        </td>
        <td width="50%" class="vertical-liness divText slds-p-bottom--medium rightBtn" >Collaborate with our team<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
         <button class="slds-button slds-button--neutral">
         <span class="btn-feedback">Get Involved</span>
         </button>
         </div>
         </td>
        </tr>
        </table>
    </div>

        .THIS .vertical-liness 
        { 
            border-left: 2px solid red;            
        }

        .THIS .leftBtn{
            padding-left:115px; 
            float:right;
        }

    .THIS .rightBtn{
        padding-left:175px;
    }

    .THIS {
        background-color: #f4f7f7;  /* ibm-cool-white-3; */
        border-top: 1px solid #d0dada; /* ibm-gray-10 */
        font-size: 20px; 
        font-weight: normal;
        color: #272727;  /* ibm-gray-90 */
    }

    .THIS .divText{
        font-size: 16px;
        color: #272727;  /* ibm-gray-90 */
    }

Answer 1

您需要在正文中创建两个 div，并将内容放入其中。

body {
  width: 500px;
  height: 500px;
}

.left, .right {
  float: left;
  width: 50%;
  height: 100%;
}

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

<div class="left">
    <p>Left column</p>
</div>
<div class="right">
    <p>Right column</p>
</div>

https://codepen.io/anon/pen/QgLKzQ

Answer 2

float: left; 和 width: 50%; 是这里的关键。

请注意，您的 div 中需要 content，如下例所示，或者给它们一个 height（例如 CSS: .left-float { height: 500px; }

请注意浮动元素会打断流程。您将需要使用下一个元素清除浮动： https://css-tricks.com/almanac/properties/c/clear/

CSS :

.left-float {
  width:50%;
  float:left;
}

HTML :

<div>
    <div class="left-float" style="background-color:green;">
    left div
    </div>
    <div class="left-float" style="background-color:red;">
    right div
    </div>
</div>

所以，使用您的代码...呃，请让我远离这个 <table> 元素！它们旨在显示表格数据，而不是提供一种定位元素的方法。在您的情况下，您不显示表格数据。

一个可能的例子： https://jsfiddle.net/12fd30bf/

HTML:

<div>
    <div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
      <span>Help us improve Customer Support</span>
    </div>
    <div class="left-float"> 
        Tell us what you think<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
          <button class="slds-button slds-button--neutral">
            <span class="btn-feedback">Provide feedback</span>
          </button>
        </div>
    </div>
    <div class="left-float">
        Collaborate with our team<br/>
        <div  class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
            <button class="slds-button slds-button--neutral">
              <span class="btn-feedback">Get Involved</span>
            </button>
        </div>
    </div>
</div>

CSS :

.left-float {
  width:50%;
  float:left;
}

Answer 3

我简化了您的标记以显示示例。您可以创建几个 flex parents 并使用它们的居中属性来重新创建它。

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.col {
  flex-direction: column;
}
.button {
  padding: 0 3em;
  text-align: center;
}
.button1 {
  border-right: 1px solid #ccc;
}
header {
  margin: 0 0 .5em;
}

<div class="flex col">
  <header>
    Help us improve Customer Support
  </header>
  <div class="buttons flex">
    <div class="button button1">
      <div>
        Tell us what you think
      </div>
      <button>Provide feedback</button>
    </div>
    <div class="button button2">
      <div>
        Tell us what you think
      </div>
      <button>Provide feedback</button>
    </div>
  </div>
</div>

将页面分成两列并将它们对齐 HTML

Divide page in two columns and align them in HTML

html

css

salesforce

lightning

responsive