Вертикальное выравнивание изображений внутри DIV

ProgramBox

Вертикальное выравнивание изображений внутри DIV

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#css

Вопрос:

Я извлекаю объемные изображения через response, и мне нужно расположить их внутри 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>amp;nbsp;amp;nbsp;</div>");

Вот что я получаю в результате

введите описание изображения здесь

Загрузка 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;
}

Ответ №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 являются необязательными. Стиль по желанию.

1. Посмотрите результат, который я получаю с вашим кодом. И в примере jsfiddle то, что вы показали, работает нормально

2. @user944919 Можем ли мы увидеть, как CSS применяется к вашим изображениям?

3. Нет, я не упоминал ни о каком CSS, и мне это нужно.

4. @user944919 Без возможности просмотра живой страницы трудно диагностировать проблему. Похоже, это может быть вызвано каким-то другим CSS, который у вас уже был.

5. Извините, Натан, на самом деле я не использую ни один файл css, только загрузчик plupload. И я обновил свой код с помощью этого css, если вам нужно, вы можете это проверить.

Ответ №2:

 img {
display: inline-box;
}

Изображения будут располагаться в одной строке, пока они там помещаются. Будьте очень осторожны со padding margin значениями и .

Ответ №3:

Изображения по умолчанию являются элементами уровня блока, поэтому вам понадобятся float: left ваши изображения (или любой другой элемент, в котором содержится ваше изображение), если вы хотите, чтобы они были рядом. Если вы хотите начать новую строку, создайте разделительный элемент, например:

 .spacer {
    clear: both;
}

а затем добавьте <div class="spacer"></div> , где вы хотите разбить строку изображений и начать новую. Для работы в старых браузерах вам могут понадобиться другие атрибуты в вашем разделителе.