如何使第二列略低一些

时间：2017-07-26 14:37:10

标签： html css

我想要这两列：

这就是现在的样子 this is how it looks like now处于同一高度。

这就是我想要的方式： this is how I wanted it to be

这是我的代码：

＆＃13;
＆＃13; 
html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40;
  margin-left: 40;
  height: 600px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

#service .service {
  Margin-left: 30;
  color: #c0392b;
  font-size: 45;
}

#service .service_txt {
  margin-left: 30;
  margin-right: 50;
  color: #fff;
  top: 190%
}
＆＃13; 
<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我假设意图是对齐两列文本的顶部？

从回流列中取出标题<p>：这样，它将采用与文本相同的宽度，并且两个文本列将以相同的高度开始。您还需要调整边距。

你还有另外一个问题：你错过了很多单位：margin: 40不是CSS中的东西，你需要指定40 what < / em>（px，em，％等）。唯一的例外是0（因为如果值为0，则您不关心单位是什么）。

此外，您的命名方案很复杂。不要这样做：#service .service，将其称为更具语义的内容，并且可能根本不使用id属性。

＆＃13;
＆＃13; 
html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

.wrapper {
  margin-left: 40px;
  height: 600px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.title {
  margin-left: 30px;
  color: #c0392b;
  font-size: 45px;
}

.wrapper .text {
  margin-top: 0; /*Add this or your first columns will start below the second*/
  margin-left: 30px;
  margin-right: 50px;
  color: #fff;
  /*top: 190% This does nothing useful*/
}
＆＃13; 
<p class="title">service</p> <!-- Move this outside the service div -->
<div class="wrapper">
  <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将columns属性设置为文本容器，如下所示：

＆＃13;
＆＃13; 
html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40;
  margin-left: 40;
  height: 600px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50;
  
}

#service .service {
  Margin-left: 30;
  color: #c0392b;
  font-size: 45;
  display: inline-block;
  width: 100%;
  
}

#service .service_txt {
  margin-left: 30;
  margin-right: 50;
  color: #fff;
  top: 190%
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
.service_img {
display: block;
margin: 10px 0px;
}
＆＃13; 
<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    <img class="service_img" src="http://fakeimg.pl/250x100/">
  </p>
  
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题