テキストボックスの配置方法HTML、CSS

Question

テキストは階段状に降りています。ここにコードがあります。私は1トンの記事を見たが、明らかに誰も私のために働いていない。コードに新しいので、いくつかの助けに感謝します。それを水平線で整列させたい。

<div class="text"> 
    <p class="text1">We strive to produce the most highest grade of product 
     possible. Efficiency is our key, with the support of our team and our fast 
     response team, we can meet every demand.</p> 
    <p class="text2">We strive to produce the most highest grade of product 
    possible. Efficiency is our key, with the support of our team and our fast 
    response team, we can meet every demand.</p> 
    <p class="text3">We strive to produce the most highest grade of product 
    possible. Efficiency is our key, with the support of our team and our fast 
    response team, we can meet every demand.</p> 
    </div> 

p.text1 { 
color: white; 
margin-right: 1250px; 
margin-left: 40px; 
text-align:center; 
font-size:20px; 
} 

p.text2 { 
color: white; 
margin-right: 600px; 
margin-left: 600px; 
text-align:center; 
font-size:20px; 
} 

p.text3 { 
color: white; 
margin-right: 20px; 
margin-left: 1200px; 
text-align:center; 
font-size:20px; 
} 

Answer 1

.text1 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: red; 
 
} 
 

 
.text2 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: green; 
 
} 
 

 
.text3 { 
 
    float: left; 
 
    width: 33%; 
 
    background-color: purple; 
 
}

<div class="text"> 
 
    <div class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</div> 
 
    <div class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</div> 
 
    <div class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</div> 
 
</div>

上記スニペットは、単に例を動作するはずです。自分のクラスにもっとCSSを追加して背景を削除することができます:)。

あり、それを行うにしても別の方法があるが、それはあなたがdisplay: table-cell財産のを助けることができるsupported by older browsers:

.container { 
 
    display: flex; 
 
} 
 
.container > div { 
 
    flex: 1; /*grow*/ 
 
}

<div class="container"> 
 
    <div>Left div</div> 
 
    <div>Middle div</div> 
 
    <div>Right div</div> 
 
</div>

Answer 2

ではありません。

.text1,.text2,.text3 { 
 
    display: table-cell; 
 
    padding: 0px 10px; 
 
    color: #000; 
 
    font-size: 20px; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
</div>

Answer 3

フレキシボックスソリューション

.text { 
 
    display: flex; 
 
    font-size: 20px; 
 
    width: 100%; 
 
    justify-content: space-around; 
 
} 
 

 
.text p { 
 
    width: 30%; 
 
    color: white; 
 
} 
 

 
.text1 { 
 
    background-color: red; 
 
} 
 

 
.text2 { 
 
    background-color: green; 
 
} 
 

 
.text3 { 
 
    background-color: purple; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
</div>

Answer 4

セット画面と親のために財産を正当化し、それはあなたに必要な出力が得られます

.text{ 
 
    justify-content: space-around; 
 
    display: flex; 
 
    } 
 
.text1 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
} 
 

 
.text2 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
} 
 

 
.text3 { 
 
color: black; 
 
width: 30%; 
 
text-align:center; 
 
font-size:20px; 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product 
 
     possible. Efficiency is our key, with the support of our team and our fast 
 
     response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product 
 
    possible. Efficiency is our key, with the support of our team and our fast 
 
    response team, we can meet every demand.</p> 
 
    </div>

Answer 5

はあなたの問題を解決するために多くの方法がありますが、私は、あなたが「フレックス」を使用することをお勧めします。フレックスコンテナに表示されるフレックスアイテムの方向を定義するフレックス方向と、メイン軸に沿ったアラインメントを定義する "justify-content"が必要です。

.text { 
 
    display: flex; 
 
    flex-direction: "column"; 
 
    justify-content: "space-around"; 
 
} 
 

 
p { 
 
    margin: 10px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
} 
 

 
p.text1 { 
 
    background: #bbb; 
 
} 
 

 
p.text2 { 
 
    background: #888; 
 
} 
 

 
p.text3 { 
 
    background: #555 
 
}

<div class="text"> 
 
    <p class="text1">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text2">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
    <p class="text3">We strive to produce the most highest grade of product possible. Efficiency is our key, with the support of our team and our fast response team, we can meet every demand.</p> 
 
</div>