如何在CSS中居两个文本列。

时间:2017-08-03 12:50:29

标签: html css layout alignment center

我有一个问题集中在这两个文本列,以便它们站在彼此旁边任何人都可以帮助我解决这个问题,我设法先通过设置填充,手动保证金,但当然我希望它是工作在所有格式上。

这里是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

事先提前

关于kristoffer

3 个答案:

答案 0 :(得分:2)

这适用于非响应式网站。如果您希望它具有响应性,您可以使用某些媒体查询对其进行修改,或者使用响应式框架(如基础)来定义不同视口大小的宽度,例如large-6 / medium-6 / small-12等

&#13;
&#13;
.container {
  width:auto;
  margin:0 auto;
}
.content {
  width:50%;
  float:left;
  text-align:center;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分: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>

答案 2 :(得分:0)

您也可以使用display flex。要做出响应,您必须将“flex-wrap:wrap”属性设置为容器,并为文本设置最小宽度。

<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>
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);

function drawRectangle(){
 var rect = new createjs.Shape();
 rect.graphics.beginFill("#000").drawRect(10, 10, 100, 100);
 stage.addChild(rect);
}

function drawShapes(){
  drawRectangle();
	stage.update();
}

drawShapes();
// Why does this call log null?
console.log(stage.getBounds());