2017-08-03 4 views
1

彼らは誰もがこの問題で私を助けることができる他、私は手動で、マージンをパディングを設定することで、以前にそれを行うために管理し、それぞれの横に立っているので、私は、これら2つのテキスト列を中心に問題を抱えているが、もちろん、私はそれが仕事をしたいですすべてのフォーマット。

ここでCSSのコードは(私は役に立たないCSSのほとんどを削除したが、私が使用するのか分からない。)である

.AboutBA { 
text-align: justify; 
position: relative; 
display:inline; 
} 

.Position { 
text-align: justify; 
display: inline; 
} 

、ここでは、HTML

<div class="container"> 

<div class="AboutBA"> 
<h3>About BrandAmb</h3> 
<p><i>BrandAmb</i> is a Danish marketing company whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p> 
</div> 

<div class="Position"> 
<h3>Our position</h3> 
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p> 
</div> 
</div> 
のためであります事前に

screenshot of the layout

THX

についてのクリストファー

+0

答えて

2

これは、非応答性のサイトのために働くだろう。応答性が必要な場合は、いくつかのメディアクエリを使用して変更するか、ファンデーションなどのレスポンシブなフレームワークを使用して、大規模6 /中6 /小12など異なるビューポートサイズで幅を定義できます。

.container { 
 
    width:auto; 
 
    margin:0 auto; 
 
} 
 
.content { 
 
    width:50%; 
 
    float:left; 
 
    text-align:center; 
 
}
<div class="container"> 
 

 
<div class="AboutBA content"> 
 
<h3>About BrandAmb</h3> 
 
<p><i>BrandAmb</i> is a Danish marketing company whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p> 
 
</div> 
 

 
<div class="Position content"> 
 
<h3>Our position</h3> 
 
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p> 
 
</div> 
 
</div>

+0

どのよう.content機能が動作しますか? –

+0

'.content'クラスは、両方の列に適用可能な幅を50%に割り当てるための再利用可能なクラスです。しかし、応答可能なフレームワークは確かにコードをクリーンアップするのに役立ちます。私は基礎を使って別の例を作成しました。これは完全に反応します。 https://codepen.io/anon/pen/dzpwmV – MegaTron

0

Bootstrap Gridを使用できます。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6"> 
    <h3>About BrandAmb</h3> 
    <p><i>BrandAmb</i> is a Danish marketing company whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p> 
    </div> 

    <div class="col-md-6"> 
    <h3>Our position</h3> 
    <p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p> 
    </div> 
    </div> 
</div> 
0

あなたが持っていたする必要が応答するディスプレイフレックスalso.Toを使用することができる「フレックスラップ:ラップ」コンテナとテキストの最小幅にプロパティを。 top`と `設定width`:あなたは両方の要素に共通するクラスを追加し、` `垂直整列して、`インラインblock`それらをdisplay`していないのはなぜ

.container 
 
{ 
 
display: flex; 
 
justify-content:center; 
 
} 
 

 
.AboutBA { 
 
text-align: center; 
 
width:50%; 
 

 
} 
 

 
.Position { 
 
text-align: center; 
 
width:50%; 
 
}
<div class="container"> 
 

 
<div class="AboutBA"> 
 
<h3>About BrandAmb</h3> 
 
<p><i>BrandAmb</i> is a Danish marketing company whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p> 
 
</div> 
 
<br/> 
 
<div class="Position"> 
 
<h3>Our position</h3> 
 
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p> 
 
</div> 
 
</div>