Question

我想安排本网站的文字以及下图

http://i60.tinypic.com/aufae0.jpg

这是我的网站：

http://avocat.dac-proiect.ro/wp/?page_id=14

这是代码HTML：

<p id="text3">
    Am reprezentat şi am acordat consultanţă juridică pentru clienţi 

persoane fizice române şi străine, instituţii publice, persoane juridice 

române şi străine în următoarele domenii:
</p>

<br><br>

<p id="text4">

- agricultură, exploatări agricole, prelucrarea şi comercializarea 

produselor agricole;
<br>
- comerţ cu produse alimentare;
<br>
- imobiliar;
<br>
- distribuţie de carburanţi;
<br>
- transporturi;
<br>
- asigurări;
<br>
- producţie şi comercializare utilaje grele;
<br>
- producţie structuri metalice;
<br>
- producţie automatizări;
<br>
- servicii de proiectare;
<br>
- comercializare automatizări;
<br>
- jocuri de noroc;
<br>
- turism, hoteluri şi pensiuni;
<br>
- medical;
<br>
- construcţii civile şi industriale;
<br>
- comercializare utilaje şi autovehicule, service auto;
<br>
- producţie software, administrarea site-urilor;
<br>
- comerţ;
<br>
- bursier, societăţi listate, investitori, fonduri de investiţii.
<br>
- asistenţă şi îngrijire copii şi vârstnici;
<br>
- exploatări forestiere şi prelucrarea lemnului;
<br>
- exploatări agricole;
<br>
- extracţia şi prelucrarea minereurilor;
<br>
- producţia şi comercializarea materialelor de construcţii;
<br>
- instituţii publice;
<br>
- instituţii religioase.</p>

此代码CSS：

    #text3{
    font-size: 17px;
    width:20%;
    float:left;
    padding: 87px 45px 45px 20px;
    padding-left:50px;

}


#text4{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    font-size:17px;
    padding-top: 50px;
    padding-left: 20px;
}

http://jsfiddle.net/s0bsfdu4/10/

JS编辑器我设法按照自己的意愿安排文本，但我尝试在网站上进行更改看起来非常难看......

你能帮我解决这个问题吗？

提前致谢！

Answer 1

您可以通过简单地删除width和float来解决您的问题：

#text3{
    font-size: 17px;
    padding: 87px 45px 45px 20px;
    padding-left:50px;
}

Answer 2

您是否考虑过使用引导程序中的affix将文本修复到顶部？

Answer 3

知道我从手机上写的所以我无法测试代码，但这里有一些想法：

使用包含2列的表格并将文本拆分为2。

<table>
 <tr>
   <td>  first text part </td>
   <td>  second text part </td>
 </tr>
 </table>

表中有许多元素可以设置大小，位置，颜色，背景。

您也可以使用2个div来制作相同的外观

Answer 4

我会将文本放入容器中。这是居中的，最大宽度为1200或您认为看起来不错的任何东西。

.container {
    margin: 0 auto;
    max-width: 1200px;
}

使用框大小调整以使边框不影响尺寸

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div后的Clearfloat

.grid:after {
  /* Or @extend clearfix */
  content: "";
  display: table;
  clear: both;
}

浮动所有div并将0填充添加到最后一列

[class*='col-'] {
  float: left;
  padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
  padding-right: 0;
}

列宽

.col-1-2 {
  width: 50%;
}

HTML

<div class="container">
<p>Am reprezentat şi am acordat consultanţă juridică pentru clienţi persoane fizice române şi străine, instituţii publice, persoane juridice române şi străine în următoarele domenii:</p>

<div class="grid">
   <div class="col-1-2">
     <div class="module">
            <h3>1/2</h3>
     </div>
   </div>
    <div class="col-1-2">
     <div class="module">
            <h3>1/2</h3>
     </div>
   </div>
</div>
</div>

我还要将列表编辑为不使用＆lt; br＆gt;并开始使用列表。

工作jsfiddle http://jsfiddle.net/0dLeqg9s/2/

您可以阅读更多相关信息http://css-tricks.com/dont-overthink-it-grids/

如何安排一个段落而不是另一个？

4 个答案: