HTML：如何在同一行上正确格式化4个元素？

Question

I have a page which should display 4 elements at a time: Name1: value Name2: value

I have used CSS to accomplish this and it works pretty well but if value is extremely long, it should continue on the next line like so:

Name1:  sdlhjbdsl      Name2: value
        aldlhsdfidshf
        sifhflkgh
Name3:  hhlsdifsdlfh   Name4: sdhsdlkfbsdljkbs
                              aiuhdwdifnb
                              s;kkvnsdfk;vn

but it actually happens like this:

Name1:  sdlhjbdsl      
        aldlhsdfidshf
        sifhflkgh
                       Name2: sdhsdlkfbsdljkbs
                              aiuhdwdifnb
                              s;kkvnsdfk;vn

How can I best accomplish the first example? This is my CSS thus far:

#printable_block1
{ 

    font-family: "Arial Unicode MS","Arial","Sans-Serif";
            font-size: 12px;
    display:inline;
            position:absolute;
    margin-left: 12px; 
    max-width:23%; 
}
#printable_block1_value 
{
    font-family: "Arial Unicode MS","Arial","Sans-Serif";
            font-size: 12px;
    display:block;
            position:relative;
    margin-left: 25%; 
    max-width:30%; 
}
#printable_block2 
{
    font-family: "Arial Unicode MS","Arial","Sans-Serif";
            font-size: 12px;
    display:inline;
            position:absolute;
    margin-left: 50%; 
    max-width:24%;
}
#printable_block2_value 
{ 
    font-family: "Arial Unicode MS","Arial","Sans-Serif";
            font-size: 12px;
    display:block;
            position:relative;
    margin-left: 75%; 
    max-width:25%;
}

Then this is my HTML:

<div id="block_container_3_blocks"> 
    <div id="printable_block1">
        <span>
           Name1:
       </span></div>
            <div id="printable_block1_value">
       <span>
           value1
       </span></div>
    <div id="printable_block2">
        <span>Name2:</span></div>
    <div id="printable_block2_value">
        <span>
           value2
        </span></div>   
</div>

Answer 1

Your method is very "haxy", but you can add top:0 to re-align your blocks.

Instead of all this, consider just using:

#block_container_3_blocks {font-size:0}
#block_container_3_blocks>div {
    display:inline-block;
    vertical-align:top;
    width:25%; /* adjust to allow different numbers of blocks */
    font-size:12pt; /* whatever your default is */
}

The "font-size:0" part is to make sure any spaces between your elements don't mess up the layout.

Answer 2

You can use another way like

 .mainBlocks { clear: both; } .divClass{ width:25%; float:left; font-family: "Arial Unicode MS","Arial","Sans-Serif"; font-size: 12px; } 

 <div class="mainBlocks"> <div class="divClass"> <span> Name1: </span> </div> <div class="divClass"> <span> value1 </span> </div> <div class="divClass"> <span>Name2:</span> </div> <div class="divClass"> <span> value2 </span> </div> </div> <div class="mainBlocks"> <div class="divClass"> <span> Name1: </span> </div> <div class="divClass"> <span> value1 </span> </div> <div class="divClass"> <span>Name2:</span> </div> <div class="divClass"> <span> value2 </span> </div> </div>