Question

我有一个3栏的网站，左栏用于展示灯具。我的问题是我的文字没有按照我想要的方式对齐，如下图所示：

enter image description here

如果有意义的话，我希望文本以对称的方式直接排列在彼此之下？

我使用的CSS如下：

   //this is for the left box
    #leftbox{
    float:left;
    width:300px;
    height:1000px;
    border-right: 1px dotted #f00;
    border-bottom:none
}

//this is for the fixtures
#fixtures{
    position:relative;
    top: -20px;
}

//this is for the image R in fixtures
#fiximg{
    position:relative;
    top: 5px;
}

我正在使用名为fixtures的PHP包含文件，因此我不会在每个页面上手动更改灯具。

<?PHP

echo '<center>';
  echo'<h3>Super Rugby Fixtures & Predictions</h3>';


  //DATE1 COMES HERE           
   echo'<u>Friday 21 February</u>';


    //FIXTURE1 COMES HERE   
echo'<p id="fixtures"><strong>Crusaders vs Chiefs</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 06:35am(SA Time)<BR />';

     //Fixture 2
echo'<p id="fixtures"><strong>Cheetahs vs Bulls</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a>19:05 (SA Time)';
echo'<br>';    
          //DATE2 COMES HERE           
  echo'<u>Saturday 22 February</u>';
echo'<br>';  


      //FIXTURE COMES HERE   
echo'<p id="fixtures"><strong>Highlanders vs Blues</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 08:35am(SA Time)<BR />'; 

    //FIXTURE2
echo'<p id="fixtures"><strong>Brumbies vs Reds</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 10:45(SA Time)<BR />'; 

      //fixture3
echo'<p id="fixtures"><strong>Sharks vs Hurricanes</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 17:05(SA Time)<BR />'; 

    //fixture4
echo'<p id="fixtures"><strong>Lions vs Stormers</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';  

       //DATE4 COMES HERE
  echo'<u>Sunday 23 February</u>';  

       //fixture
       echo'<p id="fixtures"><strong>Waratahs vs Force</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';    


echo'</center>';

        ?>

非常感谢任何帮助。

Answer 1

由于您没有附加任何HTML，这就是我从CSS中提出的：

HTML：

<div id ="leftbox">movie 1</div> <div id="fiximg">R</div> <div id="fixtures">don't bring kids</div>
<br>
<div id ="leftbox">movie 19</div> <div id="fiximg">R</div> <div id="fixtures">terrifying</div>

CSS：

#leftbox{
    float:left;
    display:inline-block;
    width:100px;
    height:100px;
    border-right: 1px dotted #f00;
    border-bottom:none
}

#fixtures{
    position:relative;
    display:inline-block;
    height:100px;
    width: 100px; /*just for consistency*/
}

#fiximg{
    position:relative;
    display:inline-block;
    height:100px;
    width:20px; padding-left: 5px;
    border-right: 1px dotted #f00;
}

小提琴：http://jsfiddle.net/t82u2/

键是display:inline-block;。

如果您需要任何帮助，可以与我联系。

Answer 2

我喜欢做这些项目只是为了更多地学习HTML / CSS。

这个FIDDLE只是在各种“持有者”中使用div（虽然表格可以，因为它确实是表格数据），可以让你轻松添加更多行。根据您的PHP要求，添加<?php echo $mydate ?>也同样容易。有数百种方法可以做到，这只是一种。

CSS

.holderdiv {
  width: 70%;
}
.datediv {
  float: left;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: underline;
}
.gamebox {
  float:left;
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
.leftdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  padding-right: 20px;
  border: 0px solid black;
}
.rightdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding-left: 20px;
}
.logodiv {
    float: left;
    width: 5%;
    height: 30px;
    line-height: 30px;
    background-color: #cccccc;
    border-radius: 5px;
    text-align: center;
}

对称地对齐文本

2 个答案: