Вопросы Теги

Выровнять поплавковые divs в центр, но последние не полные строки влево [дублировать]

Вы можете сделать это целиком в JavaScript:

IE имеет (в течение длительного времени) стандартный API для очистки базового кэша аутентификации: 

document.execCommand("ClearAuthenticationCache")

Должен возвращать true, когда он работает , Возвращает либо false, либо undefined, либо взрывается в других браузерах.

Новые браузеры (по состоянию на декабрь 2012: Chrome, FireFox, Safari) имеют «магическое» поведение. Если они видят успешный базовый запрос auth с любым фиктивным другим именем пользователя (скажем logout), они очищают кеш учетных данных и, возможно, устанавливают его для этого нового имени пользователя с фиктивным именем, которое необходимо убедиться в том, что не действительное имя пользователя для просмотра содержимого.

. Основной пример: 

var p = window.location.protocol + '//'
// current location must return 200 OK for this GET
window.location = window.location.href.replace(p, p + 'logout:password@')

. «Асинхронный» способ сделать это - сделать вызов AJAX, используя logout. Пример: 

(function(safeLocation){
    var outcome, u, m = "You should be logged out now.";
    // IE has a simple solution for it - API:
    try { outcome = document.execCommand("ClearAuthenticationCache") }catch(e){}
    // Other browsers need a larger solution - AJAX call with special user name - 'logout'.
    if (!outcome) {
        // Let's create an xmlhttp object
        outcome = (function(x){
            if (x) {
                // the reason we use "random" value for password is 
                // that browsers cache requests. changing
                // password effectively behaves like cache-busing.
                x.open("HEAD", safeLocation || location.href, true, "logout", (new Date()).getTime().toString())
                x.send("")
                // x.abort()
                return 1 // this is **speculative** "We are done." 
            } else {
                return
            }
        })(window.XMLHttpRequest ? new window.XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : u ))
    }
    if (!outcome) {
        m = "Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser."
    }
    alert(m)
    // return !!outcome
})(/*if present URI does not return 200 OK for GET, set some other 200 OK location here*/)

Вы также можете сделать это букмарклет:

javascript:(function(c){var a,b="You should be logged out now.";try{a=document.execCommand("ClearAuthenticationCache")}catch(d){}a||((a=window.XMLHttpRequest?new window.XMLHttpRequest:window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):void 0)?(a.open("HEAD",c||location.href,!0,"logout",(new Date).getTime().toString()),a.send(""),a=1):a=void 0);a||(b="Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser.");alert(b)})(/*pass safeLocation here if you need*/);

46
задан Community 23 May 2017 в 11:54
поделиться

9 ответов

Вот вам очень простой JavaScript (и некоторые небольшие изменения в вашем CSS):

http://jsfiddle.net/ha68t/

Он отлично работает для меня.

CSS: 

.container {
  margin: 0 auto;
  max-width:960px;
  background-color: gold;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: block;
  float: left;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

JavaScript: 

$(document).ready(function(){
    setContainerWidth();
});

$(window).resize(function(){
   setContainerWidth();
});

function setContainerWidth()
{
    $('.container').css('width', 'auto'); //reset
    var windowWidth = $(document).width();
    var blockWidth = $('.block').outerWidth(true);
    var maxBoxPerRow = Math.floor(windowWidth / blockWidth);
    $('.container').width(maxBoxPerRow * blockWidth);
}

Требуется jQuery:)

12
ответ дан mh-itc 18 August 2018 в 00:57
поделиться
  • 1
    Это самая простая реализация на этой странице, даже если она должна использовать несколько js. Мне больше не нужно решение, но кто-то будет! – Ivan Durst 24 May 2014 в 01:11
  • 2
    В вопросе, который вы заявили, вам «действительно понравится чистое решение для CSS», но отметили этот ответ как принятый. Не уверен, что происходит, это на другой день? Если да, значит ли это, что это не так? Но если нет, значит ли это, даже если это не так? Кто я? Который сейчас час? Где Уолдо? Что это за яркий свет? Мама?........ – Cthulhu 29 March 2016 в 10:20
  • 3
    @Cthulhu: hah. & Quot; Я действительно был бы как чистым решением CSS, но если вы скажете мне, что JS - единственный способ, мне бы хотелось увидеть это в действии. & Quot; Он ввел его в действие. Мне понравилось его решение лучше всего. Вот он! – Ivan Durst 15 June 2016 в 21:05
  • 4
    это действительно показывает, насколько сломанным CSS является то, что принятое решение использует jQuery :( – daniel.sedlacek 9 December 2016 в 12:18

Решение с дисплеем inline-block

Эта адаптивная сетка намного проще: меньше разметки и меньше CSS, поэтому ее проще будет внедрить на производственный сайт и адаптировать к вашим конкретным потребностям.

= >> DEMO & lt; = lt; = (изменить размер окна результатов, чтобы увидеть эффект) 

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}
<div id="container">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
    <div class="block">13</div>
</div>

Он включает в себя:

  1. 4 медиа-запроса для блоков шириной 200 пикселей и контейнер, расширяемый до 1000 пикселей. В зависимости от ширины элементов сетки и общей ширины вашего контейнера вам может потребоваться меньше или больше
  2. удаления пробелов между элементами встроенного блока (в следующем демо я использовал размер шрифта но вы можете использовать другие (см. Как удалить пространство между элементами встроенного блока? для других методов)
  3. фиксированные поля между блоками

Количество блоков в одной строке приспосабливается к размеру контейнера. Свойство text-align остается равным значению по умолчанию left, поэтому последние элементы выравниваются влево.

Поплавки с адаптивными полями между блоками и контейнером

= >> DEMO & lt; = lt; g23] 

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}
<div id="container">
    <div class="wrap"><div class="foto">1</div></div>
    <div class="wrap"><div class="foto">2</div></div>
    <div class="wrap"><div class="foto">3</div></div>
    <div class="wrap"><div class="foto">4</div></div>
    <div class="wrap"><div class="foto">5</div></div>
    <div class="wrap"><div class="foto">6</div></div>
    <div class="wrap"><div class="foto">7</div></div>
    <div class="wrap"><div class="foto">8</div></div>
    <div class="wrap"><div class="foto">9</div></div>
    <div class="wrap"><div class="foto">10</div></div>
    <div class="wrap"><div class="foto">11</div></div>
    <div class="wrap"><div class="foto">12</div></div>
    <div class="wrap"><div class="foto">13</div></div>
    <div class="wrap"><div class="foto">14</div></div>
    <div class="wrap"><div class="foto">15</div></div>
</div>

<!-- FOLLOWING JUST FOR THE DEMO -->
<div id="warning">I haven't written the code for windows bigger than 751px.<br/>
    You must resize this window under 751px.</div>

Этот метод включает в себя:

  1. floats
  2. position:absolute;
  3. :nt-child() css селектор
  4. медиа-запросы

Он центрирует блоки в своем контейнере и дает одинаковый марж в верхней / левой / тугой / нижней части всех блоков + сторон контейнера. Поскольку это решение использует поплавки, последняя строка выравнивается влево.

Количество блоков в одной строке приспосабливается к ширине окна.

16
ответ дан Community 18 August 2018 в 00:57
поделиться

На сегодняшний день единственным чистым решением для этого является модуль

CSS Grid Layout Module ( Codepen demo )

В основном соответствующий необходимый код сводится к следующему: 

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fill, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: center; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Сделать контейнерный контейнер контейнером сетки

2) Установить сетку с «автоматическим» количеством столбцов ширины 120 пикселей. (Значение автозаполнения используется для ответных макетов).

3) Установите зазоры / желоба для строк и столбцов сетки.

4) и 5) - Подобно flexbox. 

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  grid-gap: 1rem;
  justify-content: center;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Codepen demo (Изменить размер, чтобы увидеть эффект)

Поддержка браузера - Caniuse

В настоящее время поддерживается Chrome (Blink) и Firefox с частичной поддержкой IE и Edge (см. этот пост Рэйчел Эндрю)

Дальнейшее чтение на сетках CSS:

9
ответ дан Danield 18 August 2018 в 00:57
поделиться

Использовать flexbox: 

.container {
  display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}

.block {
  background-color: #ddd;
  border:1px solid #999;
  display: inline-block;
  height: 100px;
  margin: 4px 2px;
  width: 100px;
}

Готово.

1
ответ дан hawkeye126 18 August 2018 в 00:57
поделиться
  • 1
    Спасибо, ястреб. Проблема заключается в том, что весь набор блоков выровнен слева внутри контейнера, поэтому будет иметь место неудобный белый край с правой стороны в некоторых размерах внутри контейнера (см. Это перо и измените размер окна: codepen.io/anon/pen/pvXoEZ ). Вы можете исправить это с помощью justify-content: center;, но затем блоки внизу будут выровнены по центру, не выровнены с первым столбцом, что было исходной проблемой. Также он искал поддержку IE9 +, но все равно хотел бы видеть решение flexbox. Приближается! – Ivan Durst 8 April 2015 в 22:09
  • 2
    @IvanDurst вы можете добавить flex-grow: 1; в .block – hawkeye126 8 April 2015 в 22:54
  • 3
    @ hawkeye126, если вы добавите flex-grow:1 в .block, вы измените размеры блоков в последней строке, что не так, как мне кажется, @IvanDurst. – Gabriel Kohen 4 May 2016 в 21:47
  • 4
    @GabrielKohen верен - мы не хотим изменять размеры отдельных блоков индивидуально, они фиксированного размера. – Ivan Durst 15 June 2016 в 21:02

Нет никакого «нормального» решения для вашей проблемы, но только упомянутые «обходные пути».

Ситуация в том, что ваш контейнер блоков заполнит доступное пространство до максимальной доступной / настроенной, а затем разбивает все внутренние блоки на следующую строку, что приведет к переполнению контейнера. Также с другими конфигурациями, такими как плавание, это будет одинаковое поведение. Вот как работает рендеринг - каждый раз жадно в пространстве, чтобы вычислить поведение внутренних элементов.

Возможно, будущее Flexboxes сделает это возможным - но я не прочитал полные спецификации. Просто догадаться ...

0
ответ дан Möhre 18 August 2018 в 00:57
поделиться
  • 1
    Спасибо Море, ты можешь быть прав. FYI это должен быть комментарий, а не ответ. – Ivan Durst 15 June 2016 в 21:03

С flexbox, некоторыми псевдоэлементами, дополнительным div, и после многих разочарований я смог добиться этого без медиа-запросов (так как мне нужно было поставить свою сетку внутри множества разных элементов, запросы на медиа бы не работали для меня).

Одно предупреждение: водосточные желоба между предметами являются текучими.

Демо: http://codepen.io/anon/pen/OXvxEW

CSS: 

.wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #ffc0cb;
    max-width: 1100px;
    margin: 0.5rem auto;
    justify-content: center;
}

.wrapper:after {
    content: ' ';
    flex: 1;
    height: 100%;
    border: 1px solid #00f;
    margin: 0.5rem;
}

.child {
    flex: 1;
    border: 2px solid #ffa500;
    min-width: 300px;
    margin: 0.5rem;
    text-align: center;
}

.child-contents {
    width: 300px;
    border: 2px solid #008000;
    height: 100px;
    margin: 0 auto;
}

HTML: 

<div class='wrapper'>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>
    <div class='child'>
        <div class='child-contents'></div>
    </div>

    ...etc., more .child's...

</div>

Конечным результатом является что-то вроде этого, где зеленые прямоугольники являются div. Розовые / оранжевые границы предназначены только для справки, чтобы вы могли видеть, что происходит. Если вы удалите границы розового / оранжевого цвета, вы должны получить сетку, которую вы ищете (, хотя, опять же, обратите внимание, что водосточный желоб ).

2
ответ дан Nick Budden 18 August 2018 в 00:57
поделиться
  • 1
    Я посмотрю на это больше, когда у меня будет время, но вы можете быть на что-то. (Хотя он сломан в Safari 9.1) – Ivan Durst 27 August 2016 в 00:10

Попробуйте это с помощью простого css:

CSS:

.row {text-align: center; font-size: 0;} .block {text-align: center; дисплей: встроенный блок; ширина: 150px; высота: 15px; поле: 5px; border: 1px solid #dddddd; font-size: 13px;}

HTML: 

<div class="row">
  <div class="block"></div> 
</div>


.row{text-align:center;font-size:0;}
    .block{text-align:center;display:inline-block;width:150px;height:150px;margin:5px; border:1px solid #dddddd;font-size:13px;line-height:150px;}
<div class="row">
      <div class="block">1</div> 
      <div class="block">2</div> 
      <div class="block">3</div> 
      <div class="block">4</div> 
      <div class="block">5</div> 
      <div class="block">6</div> 
      <div class="block">7</div> 
      <div class="block">8</div> 
    </div>

0
ответ дан Rakesh Vadnal 18 August 2018 в 00:57
поделиться
  • 1
    Элементы здесь не сосредоточены в контейнере - они выровнены влево. Маржа должна быть одинаковой с левой и с правой стороны. – Ivan Durst 15 June 2016 в 21:01
  • 2
    Я не вижу никаких проблем, пожалуйста, уточните больше. Я редактировал маржу. – Rakesh Vadnal 16 June 2016 в 08:18
  • 3
    Элементы должны быть центрированы в контейнере, прямо сейчас они выровнены влево. Снова прочитайте вопрос :) – Ivan Durst 27 August 2016 в 00:09
  • 4
    @Ivan Durst, теперь, я изменил текст-align: center; в строке. – Rakesh Vadnal 29 August 2016 в 05:39
9
ответ дан Danield 6 September 2018 в 16:33
поделиться
9
ответ дан Danield 29 October 2018 в 22:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: