div с шириной 100% внутри div с шириной 90% не работает

Question

div с шириной 100% внутри div с шириной 90% не работает

0

Я сделал слайдер изображения для моей домашней страницы форума, но содержимое выходит из оболочки.

Как я могу убедиться, что содержание всегда будет на 100% шириной обертки?

HTML:

<div id="wrapper">
  <table>
    <tbody>
      <tr>
        <td>
          <div class="rg-content">
            //image slider code
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

#wrapper {
  margin: 0 auto;
  max-width: 980px;
  width: 90%;
  background: linear-gradient(#fefefe, #e7e7e7);
}

.rg-content {
  width: 100%;
  background: #101010;
}

Скриншот:

DlennartD 03 апр. 2014, в 23:29

Источник

0

попробуйте display: block или display: inline-block на css ... и зачем использовать таблицы?
pathfinder 03 апр. 2014, в 21:26
0

Не могли бы вы использовать таблицы? jsfiddle.net/jzLN6/2
Scott 03 апр. 2014, в 21:50
0

Таблицы являются стандартными для контента на форумах SFM, вот jsfiddle с полным ползунком jsfiddle.net/bB9tQ (когда я даю rg-контенту ширину в px, он работает, но я хочу, чтобы он отвечал в%)
DlennartD 04 апр. 2014, в 06:27

Показать ещё 1 комментарий

Теги:

html

css

width

wrapper

2 ответа

Ещё вопросы

попробуйте display: block или display: inline-block на css ... и зачем использовать таблицы?
Не могли бы вы использовать таблицы? jsfiddle.net/jzLN6/2
Таблицы являются стандартными для контента на форумах SFM, вот jsfiddle с полным ползунком jsfiddle.net/bB9tQ (когда я даю rg-контенту ширину в px, он работает, но я хочу, чтобы он отвечал в%)

Andy Mercer · Answer 1 · 2014-04-04T01-27-00.000Z

Что происходит

Похоже, ваш #wrapper не имеет overflow установленного в hidden. Лично я, как правило, держаться подальше от tables и использовать либо float "D block элементы или inline-block элементов. Недавно я построил слайдер с использованием figure для внешнего обложки, ul для внутренней обмотки фиксированной ширины и li для каждого элемента. Мне пришлось перевести figure в overflow:hidden для нее, чтобы скрыть все, что не должно было быть видимым. Попробуйте добавить это.

Код

#wrapper {
    overflow:hidden;
}

Таблицы являются стандартными для контента на форумах SFM, я удалил все стили из таблиц, чтобы они не влияли на мои div. Переполнение: скрытый действительно скрывает все, что находится за пределами оболочки, но я не хочу, чтобы это было скрыто, я хочу, чтобы он автоматически настраивал свою ширину, чтобы она помещалась внутри оболочки.
Вы сказали, что это слайдер в вашем вопросе, но теперь вы говорите, что хотите поместить все в оболочку. Если все это видно в обертке, как оно скользит?
Да, это слайдер, но скрытое переполнение скрывает ту часть слайда, которая находится вне оболочки, это не правильно ...
Я не понимаю, чего вы пытаетесь достичь. Для того, чтобы что-то скользило внутри и вне поля зрения, должно быть что-то скрытое. Не могли бы вы уточнить, что вы пытаетесь достичь в этом вопросе или здесь?

user3397363 · Answer 2 · 2014-04-03T20-20-00.000Z

Просто добавь

<table style="width:100%;">

http://jsfiddle.net/jzLN6/

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

в соответствии с вашим jsfinddle и вашими комментариями я внес некоторые изменения, чтобы получить этот результат

http://jsfiddle.net/bB9tQ/4/embedded/result/

не является полностью функциональным, но может быть, это основная идея того, что вы хотите сделать

поэтому, если вы хотите, чтобы макет был жидким, вам придется сделать некоторые изменения

удалите de px вашей ul и измените свой дисплей на встроенный блок, потому что, если у вас есть

display: block

это заставит ваши элементы li потерять нормальный поток на странице, и вы не сможете использовать%, чтобы растянуть контент

 <ul style="width: 100%; display: inline-block; margin-left: ;">

после этого вы должны использовать% для каждого тега li вместо px.

если это подход к тому, что вам нужно, сообщите мне, чтобы дать вам более продуманный пример

Это не работает, когда есть контент внутри, плохо.
Вы можете опубликовать один jsfiddle, чтобы лучше понять.
Вот jsfiddle с полным ползунком jsfiddle.net/bB9tQ (когда я даю rg-контенту ширину в px, он работает, но я хочу, чтобы он реагировал в%)
надеюсь, что мое редактирование может помочь вам