Авторазмер этого div с использованием только CSS

Question

Авторазмер этого div с использованием только CSS

0

Я пытаюсь получить <div class="audio-feed-wrapper"> для автоматического изменения размера (только ширина), если в нем больше тегов <li>, используя только CSS. Я готов изменить какой-то HTML, если нужно, чтобы он работал. Он также должен быть сосредоточен на странице во все времена, независимо от ее ширины.

Существует javascript, который слишком длинный для публикации здесь, что добавляет стиль некоторым тегам HTML, поэтому лучше всего посмотреть на мой jsfiddle, но я поставлю код ниже: http://jsfiddle.net/Draven/FpTp6/4/

Плагин jQuery, который используется jCarouselLite: http://www.gmarwaha.com/jquery/jcarousellite/

HTML:

<div id="wrapper">
    <section id="main" class="main">
        <div class="audio-feed-wrapper">
            <div class="arrow-prev"></div>
            <div class="audio-feed-list">
                <ul class="audio-feed">
                    <li><a href="?audio=5" title="Test Title 3"><img src="Test.Title.3.jpg" alt="Test Title 3" /></a></li>
                    <li><a href="?audio=4" title="Test Title 2"><img src="Test.Title.2.jpg" alt="Test Title 2" /></a></li>
                </ul>
            </div>
            <div class="arrow-next"></div>
        </div>
    </section>
</div>

CSS:

/** General **/
 * {
    margin:0;
    padding:0;
}
html {
    font-size:100%;
    overflow-y:scroll;
}
html, body, .nav {
    height:100%;
}
body {
    background:#000;
    font:100 1em/1 Optima, Arial, sans-serif;
    color:#fff;
}
ol, ul {
    list-style: none outside
}
/*Centers entire page*/
 #wrapper {
    position:relative;
    /*Puts container in front of distance*/
    clear:left;
    max-width:580px;
    min-width:417px;
    height:100%;
    margin:0 auto;
    border:0;
    text-align:left;
}
/*End of centering entire page*/

/*main*/
[class|=main], .main {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size:12px;
    line-height:18px;
    word-wrap:break-word;
}
.main {
    margin:0 auto;
}
/*media*/
 .audio-feed-wrapper {
    position: relative;
    top:10px;
    border: 1px solid #fff;
    max-width: 480px;
    margin: 0 auto;
    padding: 4px
}
.audio-feed li {
    margin-right: 5px;
    line-height: 90px;
}
.audio-feed img {
    vertical-align: middle;
    width: 120px;
    height: 90px
}

Draven 17 янв. 2014, в 13:45

Источник

0

plugins.learningjquery.com/jcarousellite/#responsive-carousels
gearsdigital 17 янв. 2014, в 12:48
0

Я не думаю, что это поможет мне, так как мне все еще нужно, чтобы оно функционировало. Но спасибо за ссылку.
Draven 17 янв. 2014, в 13:13

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

plugins.learningjquery.com/jcarousellite/#responsive-carousels
Я не думаю, что это поможет мне, так как мне все еще нужно, чтобы оно функционировало. Но спасибо за ссылку.

Molle · Answer 1 · 2014-01-17T10-32-00.000Z

Что ж. Существует довольно простой способ центрировать два элемента, оба с идентификатором, относительно друг друга.

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

function centerWidth(id1,id2)
{
    return ((getWidth(id2)/2)-(getWidth(id1)/2));
}

Это довольно простая математика. найдите ширину обоих элементов, затем разделив их на 2 и вычтем разность (наименьшее из наибольшего значения).

HTML может выглядеть так

<div id="x" width="500">
    <div id="y" width="350">
        something...
    </div>
</div>

Затем установите элемент

function setElm()
{
    var elm = document.getElementById(x);
    elm.style.position = "absolute";    // Can be set in a CSS file as #x{position:absolute;}
    elm.style.left = centerWidth("x","y") + "px"; //This is actualy CSS generated by JS. So if the width is dynamic, the elements will still be centered correctly. Remember to add the +"px".
}

Теперь я не понимаю, почему div не расширяется, если только не существует "max-width"?

--РЕДАКТИРОВАТЬ--

Вы могли бы попытаться предоставить соответствующий div (div class= "audio-feed-wrapper") идентификатор, например, аудио-корневую упаковку.

function setElm()
{
    var elm = document.getElementById(x);
    elm.style.position = "absolute";    // Can be set in a CSS file as #x{position:absolute;}
    elm.style.left = centerWidth("x","y") + "px"; //This is actualy CSS generated by JS. So if the width is dynamic, the elements will still be centered correctly. Remember to add the +"px".

    var x = document.getElementById("audio-feed-wrapper");
    var y = x.getElementsByTagName("li");

    width = 0;
    for (var i=0; i<y.length; i++)
    {
         width = width + y[i].offsetWidth;
         // now I don't know if .offsetWidth works here, I'm just guessing here.
    }
    x.style.width = width + "px";
}

Как вы можете видеть в JSFiddle, div расширяется по умолчанию. Так как есть только два <li> (или изображения) <li> он должен сжаться, чтобы уместиться вокруг них, без дополнительного пространства, а затем расширяться по мере добавления <li> .
Файл javascript jCarouselLite заставляет <div> расширяться. Он рассчитывает, сколько изображений вы хотите видеть (в моем случае 6) и ширину их (120 пикселей).
Как насчет моего раздела РЕДАКТИРОВАТЬ?