Question

我有以下代码：

<!DOCTYPE html>
<html>
<body>

<?php

    $i =0;
    for($i=0; $i< 5; $i++) {
        echo'<div class="bloc" style="text-align:center; margin-left:-120px;"><br> '.$i.'</div>';
    }

    for($i=4; $i>= 0; $i--) {
        echo'<div class="bloc" style="text-align:center; margin-right:-120px;"><br> '.$i.'</div>';
    }

?>
</body>
</html>

看到它正常工作：

<html>
   <head></head>
   <body>
      <div class="bloc" style="text-align:center; margin-left:-120px;">
         <br>0
      </div>
      <div class="bloc" style="text-align:center; margin-left:-120px;">
         <br>1
      </div>
      <div class="bloc" style="text-align:center; margin-left:-120px;">
         <br>2
      </div>
      <div class="bloc" style="text-align:center; margin-left:-120px;">
         <br>3
      </div>
      <div class="bloc" style="text-align:center; margin-left:-120px;">
         <br>4
      </div>
      <div class="bloc" style="text-align:center; margin-right:-120px;">
         <br>4
      </div>
      <div class="bloc" style="text-align:center; margin-right:-120px;">
         <br>3
      </div>
      <div class="bloc" style="text-align:center; margin-right:-120px;">
         <br>2
      </div>
      <div class="bloc" style="text-align:center; margin-right:-120px;">
         <br>1
      </div>
      <div class="bloc" style="text-align:center; margin-right:-120px;">
         <br>0
      </div>
   </body>
</html>

我试图在页面中间打印数字0-4和4-0，其中一个位于中间右侧，另一个位于左侧（边距）。我希望输出看起来像这样：

增加的数字将在中心减去左边的120个像素，而减少的数量将在中心减去120个像素到右边

我尝试添加CSS：

.bloc{
    display:inline;
    float:left;
}

但这似乎将所有数字放在一个地方，而不是我希望它们被描绘成的方式。我也尝试使用<span>标记产生相同的结果。

Answer 1

你真的可以尝试

使用填充而不是边距
它更容易创建一个包含0自动和自动宽度的包装器，其中元素没有浮动。
你可以尝试一些技巧：nth-child（偶数）。见这里：http://www.w3schools.com/cssref/sel_nth-child.asp
您可以尝试阅读有关弹性框的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

也许我误解了你的问题。不要犹豫回复。

Answer 2

这将对您有所帮助：

<style type="text/css">
    .halfDiv{
        width:50%;
    }
    .left{
        float:left;
    }
    .right{
        float:right;
    }
</style>

<div class="halfDiv left">
<?php
$i =0;
for($i=0; $i< 5; $i++) {
echo'<div class="right">'.$i.'-</div><br>';
}

?>
</div>
<div class="halfDiv right">
<?php
for($i=4; $i>= 0; $i--) {
echo'<div class="left"> '.$i.'</div><br>';
}
?>
</div>

Answer 3

＆＃13;

.leftdiv,.rightdiv{display:inline-block;}
.parent{text-align:center;}

＆＃13;

<html>

<head></head>

<body>
  <div class="parent"><div class="leftdiv"><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div></div>
  <div class="rightdiv"><div>4</div><div>3</div><div>2</div><div>1</div><div>0</div></div></div>
</body>

</html>

＆＃13;

Answer 4

你需要像这样在一个LOOP中做你的表。

if let rawArray = rawData as? NSArray,
   let castArray = rawArray as? Array< Dictionary< String, AnyObject > >
   { 
       // etc... 
   }

<body>
    <table style="text-align:center; margin: 0 auto">
        <?php
        $limit = 4;
        for ( $i = 0, $j = $limit; $i <= $limit & $j >= 0; $i++, $j-- ) {
            echo "<tr>";

            echo "<td>". "$i" . "</td>";
            echo "<td>". "$j" . "</td>";

            echo "<tr>";
        }
        ?>
    </table>

</body>

Answer 5

试试这个，

<div id="main">
<?php
    for($i=0; $i< 5; $i++) {
        echo'<div class="left"><br> '.$i.'</div>';
        for($j=4-$i; $j<5-$i; $j++){
            echo'<div class="right"><br> '.$j.'</div>';
        }
        echo "<br/>";
    }
?>
</div>


<style type="text/css">
    .left{
        float:left;
        width: 100px;
        height: 100px;
    }
    .right{
        float:left;
        width: 100px;
        height: 100px;
    }
    #main{
        width: 200px;
    }       
</style>

Answer 6

作为PHP，您可以使用

<!DOCTYPE html>
<html>
<body>
<style>
    .bloc{display: inline-block; width: 49%;}
    .left{text-align: right; padding-right:0.5%;}
    .right{text-align: left; padding-left:0.5%;}
</style>
<?php
    $i =0;
    for($i=0; $i< 5; $i++) {
        echo'<div class="bloc left">'.$i.'</div>';
        echo'<div class="bloc right">'.(4-$i).'</div>';
    }
?>
</body>
</html>

作为片段

＆＃13;

.bloc{display: inline-block; width: 49%;}
.left{text-align: right; padding-right:0.5%;}
.right{text-align: left; padding-left:0.5%;}

＆＃13;

<div class="bloc left">0</div>
<div class="bloc right">4</div>
<div class="bloc left">1</div>
<div class="bloc right">3</div>
<div class="bloc left">2</div>
<div class="bloc right">2</div>
<div class="bloc left">3</div>
<div class="bloc right">1</div>
<div class="bloc left">4</div>
<div class="bloc right">0</div>

＆＃13;

Answer 7

您可以将它们分组，并将宽度设置为50％以确保它们正确居中

<!DOCTYPE html>
<html>
<head>
    <style>
        .bloc{
            width: 50%;
            float: left;
        }
        .bloc > div{
            padding: 0 10px;
        }
        .text-right{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class='bloc'>
    <?php for($i=0; $i< 5; $i++) : ?>
        <?php echo '<div class="text-right">'.$i.'</div>'; ?>
    <?php endfor; ?>
    </div>
    <div class='bloc'>
    <?php for($i=4; $i>= 0; $i--) : ?>
        <?php echo '<div>'.$i.'</div>'; ?>
    <?php endfor; ?>
    </div>
</body>
</html>

在页面中对齐<div>标签

7 个答案: