Question

鉴于CSS中的项目看起来像这样：

Event Starts: 26 October 2013

Event Ends: 28 October 2013

Location: The Neigh Court Yard, London, E19 4AF

我如何在CSS中垂直/水平排列它们，使它看起来像这样：

Event Starts:   26 October 2013

Event Ends:     28 October 2013

Location:       The Neigh Court Yard, London, E19 4AF

到目前为止

代码：

        <div class="fb">
        Event Starts: 26 October 2013<br>
        Event Ends: 28 October 2013<br>
        Location: The Neigh Court Yard, London, E19 4AFF<br>
        Please note that this event has already taken place.
        </div>

Answer 1

你走了：

http://fiddle.jshell.net/ghmtzrr5/

<table class="fb">
    <tr>
        <td class="firstCell">
        Event Starts:
        </td>
        <td>
             26 October 2013
        </td>
    </tr>
    <tr>
       <td class="firstCell">
        Event Ends: 
        </td>
        <td>
            28 October 2013
        </td>
    </tr>
    <tr>
        <td class="firstCell">
        Location: 
        </td>
        <td>
            The Neigh Court Yard, London, E19 4AFF
        </td>
    </tr>
    <tr>
        <td colspan="2">
        Please note that this event has already taken place.
        </td>
    </tr>
</table>

table td
{
border: 1px solid black;
}

.firstCell
{
width: 100px;
}

// UPDATE，不带表

http://fiddle.jshell.net/ghmtzrr5/1/

Answer 2

http://jsfiddle.net/eLv5j7fs/

<div class="fb">
    <span>Event Starts:</span> 26 October 2013<br>
    <span>Event Ends:</span> 28 October 2013<br>
    <span>Location:</span> The Neigh Court Yard, London, E19 4AFF<br>
    Please note that this event has already taken place.
</div>

像这样设计样式：

span {
  width: 100px;
  display: inline-block;
}

Answer 3

只需使用包装器来分割这两个元素。

<div class="wrap">
    <div class="left">
        <p>Event Starts</p>
        ....
    </div>
    <div class="right">
        <p>: 26 October 2013</p>
        ....
    </div>
</div>

.wrap{
width:80%; /*what ever size you wish*/

}

.left,
.right{
    width:50%;
    text-align:left;
}
left{
    float:left;
}
right{
    float:right;
}

//if you choose this method you can best scale left and right down to 49.5%
//this way you keep everything as responsive as can be. 
.mid{
    width:1%;
}

<div class="wrap">
    <div class="right">
        <p>Event Starts</p>
        ....
    </div>
    <div class="mid">
        <p>:</p>
    </div>
    <div class="left">
        <p> 26 October 2013</p>
        ....
    </div>
</div>

Answer 4

Here is a JSFiddle showing一种方法。将div中的每一行包裹在p内部的每一部分，并设置每个部分width和float。

HTML：

<div class="formBlock">
    <div class="info"><p>Event Starts:</p> <p>26 October 2013</p></div>
    <div class="info"><p>Event Ends:</p> <p> 28 October 2013</p></div>
    <div class="info"><p>Location:</p> <p> The Neigh Court Yard, London, E19 4AFF</p></div>
    <p class="last">Please note that this event has already taken place.</p>
</div>

的CSS：

.formBlock {
    width: 100%;
}

.info {
    width: 100%;
    margin-bottom: 1em;
}
p{
    float: left;
}
p:nth-of-type(even){
    font-weight: 700;
    width: 80%;
}

p:nth-of-type(odd){
    width: 20%;
}

p.last {
    width: 100%;
}

使用div后冒号后水平和垂直排列文本元素

4 个答案: