-1

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

我不明白我是否在这里错过了任何 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 */
    }
4

3 回答 3

2

我简化了你的标记来展示一个例子。您可以创建几个 flex 父级并使用它们的 centering 属性来重新创建它。

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

于 2017-06-01T14:59:58.893 回答
0

你需要在你的 body 中创建两个 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

于 2017-06-01T14:33:08.820 回答
0

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

请注意，您需要 div 中的任一内容，如下例所示，或者给它们一个高度（例如 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;
}
于 2017-06-01T14:35:12.193 回答