2017-06-01 90 views
-1

Image我想在标题下方的两列显示页面,并按照其方式对齐按钮。将页面划分为两列,并将它们对齐为HTML

我不明白我是否在这里错过任何divs?

我一直在尝试这样做,但它没有显示出我期望的样子。

<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 */ 
    } 
+1

张贴你试图解决问题的完整的HTML和CSS。看看如何创建[mcve] –

+0

有没有** CSS **方法来对齐不共享父项的元素。 –

+0

@Michael Coker,我添加了完整的HTML和图像 – user5495947

回答

1

我简化您的标记,以显示一个例子。您可以创建几个灵活父项并使用它们的居中属性重新创建此项。

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

+0

它按预期工作,现在我看到我做了什么,我没有正确包装标题。非常感谢!!! – user5495947

0

您需要在您的身体中创建两个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

+0

谢谢我有问题包装了按钮。我能够将页面分成两列。 – user5495947

0

float: left;width: 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; 
} 
+0

谢谢我有问题包装了按钮。我能够将页面分成两列。 – user5495947

相关问题