Question

我正在尝试排列两个包含.jpg文件的列表，在div中，另一个是另一个列表中的文本文件。

private
def url_format
  uri = URI.parse(self.url)
  errors.add(:url, 'Url is invalid') unless uri.kind_of?(URI::HTTP)
end

我想在浏览器窗口中间排列它们，如下所示：

<!DOCTYPE html>
<html>
<style>
    .left{height:auto; float:left;}
    .right{height:auto; float:right;}

</style>
<body>
<br>
<br>
<?php
    $files = scandir('files');
    sort($files); // this does the sorting
    foreach($files as $file){
        $extension = pathinfo($file,PATHINFO_EXTENSION);
            if($extension == 'jpg')
                echo'<br><div class="left">'.$file .'</div>';
    }

    $files2 = scandir('files');
    sort($files2); // this does the sorting
    foreach($files2 as $file2){
        $extension2 = pathinfo($file2,PATHINFO_EXTENSION);
            if($extension2 == 'txt')
                echo'<br><div class="left">'.$file2 .'</div>';
    }
?>

</body>
</html>

相反，我得到的输出是这样的：

                       test.jpg  test.txt
                       test2.jpg test2.txt
                       here.jpg  here.txt

即使我正在使用漂浮物。我尝试使用float：右边的文本文件，但只是将div放在右边，再次使用错误的高度。

我尝试添加test.jpg test2.jpg here.jpg test.txt test2.txt here.txt，margin:auto;

但这些似乎都没有帮助。

各种各样的标记......

display inline-block;

我需要使用php，因为我需要扫描某个目录中的文件，这应该是它的样子（文件列表位于屏幕中间）。

Answer 1

您也可以考虑使用flex

检查以下代码段

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  justify-content: center;
}
.container div {
  width: 40%;
  text-align: center;
}

＆＃13;

<div class="container">
  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>

  <div>
    text1
  </div>

  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>
  <div>
    text2
  </div>

  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>
  <div>
    text3
  </div>
</div>

＆＃13;

希望这有帮助

Answer 2

尝试在父div中添加2个div，例如：

<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>

还要确保你有正确的div类，因为现在有2个左类

Link to this fiddle

Answer 3

简单的方法是将它们向左浮动并给它们所需的宽度。这是大多数简单网格系统的行为方式。

＆＃13;

.left {
  background: #ccc;
  float: left;
  width: 50%;
}

.right {
  background: #666;
  float: left;
  width: 50%;
}

＆＃13;

<div class="left">
  div left
</div>
<div class="right">
  div right
</div>

＆＃13;

Answer 4

您需要将所有内容包装在div标签中。将它们放在另一个Div标签中将允许您使用左浮动并正确向右浮动。

类似的东西：

git stash -q --keep-index

确保包裹的样式足以容纳其他2个div并排。（即如果包装宽度为1000px，则添加时其他div应低于1000px。这可以通过在内部标签上使用百分比来避免。）

CSS应该类似于：

<div id='wrap'>

<div id='left'>test.jpg</div>
<div id='right'>test.txt </div>

</div>

将它放入中间，你只需要添加：

#wrap {
width:1000px;
}

#left{
float:left;
width:50%;
}

#right{
float:right;
width:50%;
}

进入＆＃39;包装＆＃39; CSS。即。

margin-left:auto;
margin-right:auto;
display:block;

我的代码上没有#wrap { width:1000px; margin-left:auto; margin-right:auto; display:block; }。这可能是问题吗？

在CSS中排列两个独立的Div

4 个答案: