Как поддерживать два стола бок о бок горизонтально?

У меня есть две таблицы на странице HTML, выровненные по горизонтали, одна слева, а другая справа, и они отлично смотрятся, когда браузер максимизирован, но они теряют горизонтальное выравнивание при уменьшении размера окна. Я использовал следующий CSS для обеих таблиц.Как поддерживать два стола бок о бок горизонтально?

Таблица 1

.viewTable { 
    background-color: #eeeff4 !important; 
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-bottom: 20px; 
    width: 79% ; 
    margin-left:0; 
    float: left; 
    clear:both; 
}

Таблица 2

.settleViewTable { 
    border-collapse: collapse; 
    border-spacing: 0; 
    margin-bottom: 20px; 
    width: auto; 
    margin-right:10px; 
    margin-left:10px; 
    float: right; 
}

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

источник

2015-06-09 DoIt

я думаю, вы должны попытаться установить ширину '' settleViewTable' как ширина: известково (100% - 20px) '(-20px потому, что у вас есть два 10px поля). – Patrick

.settleViewTable {width: calc (21% - 20px);} – Stickers

@sdcr. Отлично, это сработало – DoIt

У вас есть таблица 1 комплект для width:79% и таблица 2 имеет как левый + правый край 10px вместе 20px, так что ширина таблицы 2 будет width:calc(21% - 20px); Это будет убедиться, что эти две таблицы остаться бок о бок с плавающим.

Узнайте больше о CSS calc() - https://developer.mozilla.org/en-US/docs/Web/CSS/calc

источник

2015-06-09 19:47:50 Stickers

Как поддерживать два стола бок о бок горизонтально?

ответ

Смежные вопросы