Question

我正在尝试并排显示两列（左边的一列有4个项目，右边的一个有3个，共有7个项目）我有：

#wrap{
  width:600px;
  margin:0px auto;
  column-count: 2;
}
#left_col {
   float:left;
   width:200px;
}
#right_col{
  float: right;
  width: 200px;
}

<div id="wrap">
  <div id="left_col">
    <a href="number1.php"><img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1</a>
    <a href="number2.php"><img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2</a>
    <a href="number3.php"><img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3</a>
    <a href="number4.php"><img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4</a>
  </div>
  <div id="right_col">
    <a href="num1.php"><img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1</a>
    <a href="num2.php"><img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2</a>
    <a href="num3.php"><img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3</a>
  </div>
</div>

我的问题是，当我运行它时，left_col中的链接/图片/文字似乎不会像right_col中那样显示为每一行上的一个项目而且它不是将文本显示在一起，因为它似乎在它下面的行上。

Answer 1

在display:block代码上添加a：

#wrap{
  width: 600px;
  margin: 0px auto;
}
#left_col {
   float: left;
   width: 200px;
}
#right_col{
  float: right;
  width: 200px;
}
a {
  display: block;
}

<div id="wrap">
  <div id="left_col">
    <a href="number1.php"><img src="http://lorempixel.com/75/65/technics/1" alt="number1" height="65" width="75"/> Number 1</a>
    <a href="number2.php"><img src="http://lorempixel.com/75/65/technics/2" alt="number2" height="65" width="75"/> Number 2</a>
    <a href="number3.php"><img src="http://lorempixel.com/65/75/technics/3" alt="number3" height="75" width="65"/> Number 3</a>
    <a href="number4.php"><img src="http://lorempixel.com/75/65/technics/4" alt="number4" height="65" width="75"/> Number 4</a>
  </div>
  <div id="right_col">
    <a href="num1.php"><img src="http://lorempixel.com/75/65/technics/5" alt="num1" height="65" width="75"/> Number 1</a>
    <a href="num2.php"><img src="http://lorempixel.com/75/65/technics/6" alt="num2" height="65" width="75"/> Number 2</a>
    <a href="num3.php"><img src="http://lorempixel.com/75/65/technics/7" alt="num3" height="65" width="75"/> Number 3</a>
  </div>
</div>

但理想情况下，您应该使用列表来执行此操作。

Answer 2

＆＃13;

#wrap{
  width:600px;
  margin:0px auto;
  column-count: 2;
}
#left_col {
   float:left;
   width:200px;
}
#left_col a {
   display: block;
}
#right_col{
  float: right;
  width: 200px;
}

＆＃13;

<div id="wrap">
  <div id="left_col">
    <a href="number1.php"><img src="number1.png"alt="number1" border="0" align="top" height="65" width="75"/>num1</a>
    <a href="number2.php"><img src="number2.png"alt="number2" border="0" align="top" height="65" width="75"/>num2</a>
    <a href="number3.php"><img src="number3.png"alt="number3" border="0" align="top" height="75" width="65"/>num3</a>
    <a href="number4.php"><img src="number4.png"alt="number4" border="0" align="top" height="65" width="75"/>num4</a>
  </div>
  <div id="right_col">
    <a href="num1.php"><img src="num1.png"alt="num1" border="0" align="top" height="65" width="75"/>number1</a>
    <a href="num2.php"><img src="num2.png"alt="num2" border="0" align="top" height="65" width="75"/>number2</a>
    <a href="num3.php"><img src="num3.png"alt="num3" border="0" align="top" height="65" width="75"/>number3</a>
  </div>
</div>

＆＃13;

Answer 3

为列的width添加 150 px ：

#wrap{
  width:600px;
  margin:0px auto;
  column-count: 2;
}
#left_col {
   float:left;
   width:150px;
}
#right_col{
  float: right;
  width: 150px;
}

两列未在HTML中正确显示

3 个答案: