Question

我正在通过响应检索批量图像，我需要将它们排列在div标记内，并且所有图像都放在另一个之下，但我需要将它们垂直排列（即并排）

那我该怎么做？我按照本教程，但我只能安排文本？

http://phrogz.net/CSS/vertical-align/index.html

有人能以正确的方式向我推荐吗？

这是我的代码：

$('#showfilelist').append("<div id=" + file.id + "><a href='uploads/" +
file.target_name + "' target='_blank' rel='gallery'><img src='thumbs/" +
file.target_name + "' border='0'/></a>&nbsp;&nbsp;</div>");

以下是我得到的结果

enter image description here

Plupload Css：

    /*
   Plupload
------------------------------------------------------------------- */

.plupload_button {cursor: pointer;}

.plupload_wrapper {
    font: normal 11px Verdana,sans-serif;
    width: 100%;
}

.plupload .plupload_container input {width: 98%;}
.plupload .plupload_filelist_footer {border-width: 1px 0 0 0}
.plupload .plupload_filelist_header {border-width: 0 0 1px 0}
div.plupload .plupload_file {border-width: 0 0 1px 0}
div.plupload div.plupload_header {border-width: 0 0 1px 0; position: relative;}

.plupload_file .ui-icon {
    cursor:pointer; 
}

.plupload_header_content {
    background-image: url('../img/plupload.png');
    background-repeat: no-repeat;
    background-position: 8px center;
    min-height: 56px;
    padding-left: 60px;
    position:relative;
}
.plupload_header_content_bw {background-image: url('../img/plupload-bw.png');}
.plupload_header_title {
    font: normal 18px sans-serif;
    padding: 6px 0 3px;
}
.plupload_header_text {font: normal 12px sans-serif;}

.plupload_filelist,
.plupload_filelist_content {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

.plupload_cell {padding: 8px 6px;}

.plupload_file {
    border-left: none;
    border-right: none;
}

.plupload .ui-sortable-helper,
.plupload .ui-sortable .plupload_file {
    cursor:move;    
}

.plupload_scroll {
    max-height: 180px;
    min-height: 168px;
    _height: 168px;
    overflow-y: auto;
}

.plupload_file_size, .plupload_file_status {text-align: right;}
.plupload_file_size, .plupload_file_status {width: 52px;}
.plupload_file_action {width: 16px;}
.plupload_file_name {
    overflow: hidden;
    padding-left: 10px;
}

.plupload_file_rename {
    width:95%;  
}

.plupload_progress {width: 60px;}
.plupload_progress_container {padding: 1px;}


/* Floats */

.plupload_right {float: right;}
.plupload_left {float: left;}
.plupload_clear,.plupload_clearer {clear: both;}
.plupload_clearer, .plupload_progress_bar {
    display: block;
    font-size: 0;
    line-height: 0;
}
.plupload_clearer {height: 0;}

/* Misc */
.plupload_hidden {display: none;}
.plupload_droptext {
    background: transparent;
    text-align: center;
    vertical-align: middle;
    border: 0;
    line-height: 165px;
}

.plupload_buttons, .plupload_upload_status {float: left}

.plupload_message {
    position: absolute;
    top: 0px;
    left: 0px;  
    height: 100%;
    width: 100%;
}

.plupload_message p {
    padding:0.7em;
    margin:0;
}

.plupload_message strong {
    font-weight: bold;  
}

plupload_message i {
    font-style: italic; 
}

.plupload_message p span.ui-icon {
    float: left;
    margin-right: 0.3em;    
}

.plupload_header_content .ui-state-error,
.plupload_header_content .ui-state-highlight {
    border:none;    
}

.plupload_message_close {
    position:absolute;
    top:5px;
    right:5px;
    cursor:pointer; 
}

.plupload .ui-sortable-placeholder {
    height:35px;
}

Answer 1

我相信你想要的是float: left;你的照片。

功能示例：http://jsfiddle.net/NeMDZ/2/（尝试移动中间分隔线。灵活布局是可选的。）

基本CSS：

div.imgContain {
    overflow:hidden; /* Only necessary if you need to style the containing box.
    Forces box to expand to content's height. */
}
div.imgContain img {
    float:left;
}

所有其他CSS都是可选的。风格随意。

Answer 2

img {
display: inline-box;
}

只要图像适合，图像就会设置在同一行。对padding和margin值非常小心。

Answer 3

默认情况下，图像是块级元素，因此如果您希望它们并排显示，则需要在图像上（或图像所包含的任何元素）float: left。如果要开始新行，请创建一个间隔元素，如：

.spacer {
    clear: both;
}

然后将<div class="spacer"></div>添加到您要打破一行图像并开始新图像的位置。您可能需要在spacer上使用其他属性才能在旧浏览器中使用。

DIV内图像的垂直对齐

3 个答案: