Diviser la page en deux colonnes et les aligner en HTML

Question

Image Je voudrais afficher la page dans deux colonnes sous le titre et centrer les boutons comme ils sont.

Je ne comprends pas si j'ai manqué des divs ici?

J'ai essayé de le faire mais ce n'est pas montrer la façon dont je m'attendais.

<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

J'ai simplifié votre balisage pour montrer un exemple. Vous pouvez créer un couple de parents flex et utiliser leurs propriétés de centrage pour recréer ceci.

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

Answer 2

Vous devez créer deux div dans votre corps et placer le contenu dans chacun d'entre eux.

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 3

float: left; avec width: 50%; est la clé ici.

Veillez à ce que vous avez besoin soit contenu dans votre div comme dans l'exemple ci-dessous, soit leur donner une hauteur (par exemple CSS:. .left-float { height: 500px; }

Soyez prudent, soit que les éléments flottants brisera le flux . vous devrez effacer float avec les éléments suivants: 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> 

Donc, avec votre code ... Ugh, me rebuter cet élément <table> s'il vous plaît! Ils sont conçus pour afficher des données tabulaires et non pour fournir un moyen de positionnement des éléments. Dans votre cas, vous n'affichez pas les données tabulaires.

Un exemple de la façon dont il pourrait être: 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; 
}