Ширина позиционирования CSS

-1

Я борюсь с позиционированным элементом, который я хочу изменить.Ширина позиционирования CSS

У меня есть элемент, который имеет положение абсолютное. Внутри я делаю три div, .left, .center, .right. Я хочу, чтобы иметь возможность изменять размер элемента, перетаскивая его на .left, .right, который сжимает элемент вниз. (Я не включаю JS для перетаскивания, это не имеет значения до сих пор - вы можете просто увеличить/уменьшить ширину элемента в консоли).

Вопрос: Моя проблема заключается в том, что элементы, похоже, не выравниваются внутри div-содержимого .center и .right сбрасываются. Если я заставляю их плавать, при изменении размера элемента появляется такое же поведение. И поскольку я собираюсь изменить размер элемента .holder, я не контролирую ширину элемента .center, поэтому технически он должен просто сжиматься, чтобы соответствовать ширине минус ширина .left и .right.

Я сделал это jsfiddle.

Edit: обновлен, слившись .holder и .second в .second

Edit: Я не сделал, что понятно, но высота не может расти выше 60 пикселей.

Редактировать: Текст в центре может быть скрыт, если элемент очень мал по ширине, мне не нужен текст.

Редактировать: спасибо всем, кто участвовал! все были близки к позиционированию стола. Я не использовал его раньше.

Выбор этого: jsfiddle.net/abhitalks/c5L6tLt0/25 и http://jsfiddle.net/abhitalks/1o3vbhhp/ фидель как то, что мне было нужно, я еще дальше, чтобы найти способ уменьшить его просто .left и .right и сохранить высоту 60pixels, но эти 2 очень близки к тому, что я искал.

Спасибо всем снова!

HTML:

<body> 
    <div class="first"> 
     <div class="second"> 
      <div class="left"></div> 
      <div class="center">Should be center</div> 
      <div class="right"></div> 
     </div> 
    </div>  
</body>

CSS:

.first { 
    position: relative; 
    border: solid 1px green; 
    width: 600px; 
    height: 600px; 
} 

.second { 
    position: absolute; 
    border: solid 1px red; 

    left: 100px; 
    top: 10px; 
} 

.left, .right, .center { 
    height: 60px; 
} 

.left, .right { 
    min-width: 1px; 
    width: 5px; 
    max-width: 5px; 
    background-color: skyblue; 
}

источник

2014-11-25 GogromaT

Вы можете использовать display: table на контейнера и display: table-cell на .left, .center, .rightdiv с нужным.

Предоставление width:100% до .center приведет к растягиванию до доступного места.Изменение ширины легко.

В приведенном ниже примере фрагмента вы можете попробовать изменить ширину, нажав .left (для уменьшения) или .right (для увеличения).

Ваша обновленная скрипка: http://jsfiddle.net/abhitalks/c5L6tLt0/22/

Код сниппета:

$(".right").on("click", function() { 
 
    $(this).parent().css("width", "+=10px"); 
 
}); 
 
$(".left").on("click", function() { 
 
    $(this).parent().css("width", "-=10px"); 
 
});

.first { 
 
    position: relative; 
 
    border: solid 1px green; 
 
    width: 400px; height: 240px; 
 
} 
 
.second { 
 
    position: absolute; 
 
    border: solid 1px red; 
 
    left: 100px; top: 10px; 
 
    width: 120px; height: 60px; 
 
    display: table; transition: all 250ms; 
 
} 
 
.left, .right, .center { 
 
    display: table-cell; 
 
    height: 100%; 
 
    overflow: hidden; text-align: center; vertical-align: middle; 
 
    word-wrap: break-word; word-break: break-all; 
 
} 
 
.left, .right { 
 
    min-width: 5px; width: 5px; max-width: 5px; 
 
    background-color: skyblue; cursor: pointer; 
 
} 
 
.center { width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="first"> 
 
     <div class="second holder"> 
 
      <div class="left" title="Click to shrink"></div> 
 
      <div class="center">Center</div> 
 
      <div class="right" title="Click to grow"></div> 
 
     </div> 
 
    </div> 
 
</body>

Если вы хотите, чтобы снять ограничение высоты и сделать его расти или уменьшаться по содержанию, а затем просто удалить высоту из всех div с.

Смотрите эту скрипку: http://jsfiddle.net/abhitalks/1o3vbhhp/

Если вы хотите, чтобы содержимое быть скрыты или прокручивается, когда div ширина изменяется, то table-cell не допустит этого. Вам придется обернуть внутренний div, чтобы сделать это.

Fiddle с внутренним сНом свиткой: http://jsfiddle.net/abhitalks/c5L6tLt0/23/

Fiddle с содержанием скрытого и высотой исправлено: http://jsfiddle.net/abhitalks/c5L6tLt0/24/

Или это, если вы счастливы со словом перерывами, чтобы позволить меньший размеру до 1 символа:

Fiddle with word break: http://jsfiddle.net/abhitalks/c5L6tLt0/25/

источник

2014-11-25 14:15:31 Abhitalks

это замечательно, но мне нужно уменьшить его еще больше - это меня как-то не позволяет. И поскольку я сказал, что это нормально, если текст переполняется и становится ... или пустым – GogromaT

Обновлен ответ. Просто добавьте стили упаковки. – Abhitalks

это лучше, но высота фиксируется на 60 пикселей ... Могу ли я полностью переполнять текст и поддерживать ту же высоту? – GogromaT

Удалите следующий раздел из вашего CSS

.holder { 
    width: 100px; 
    height: 60px; 
}

Почему вы претендуете два класса на тех же DIV так или иначе?

UPDATE

здесь обновленный код, который может работать для вас. Относитесь к своему Div как таблице. Его очень легкий и мощный.

.first { 
display: table; 
    border: solid 1px green; 
} 

.second { 
    display: table-row; 
    border: solid 1px red; 

    left: 100px; 
    top: 10px; 
} 


.left, .right, .center { 
    display:table-cell; 
} 

.left, .right { 
    min-width: 1px; 
    width: 5px; 
    max-width: 5px; 
    background-color: skyblue; 
}

источник

2014-11-25 14:08:57

Я применяю только для иллюстрации, что это «держатель», я могу объединить два. Если я удалю его, то слева находится левая., Но это не правая сторона, а .center все еще нажата вниз. – GogromaT

проверить обновленный код в моем комментарии. Просто обновите этот css в своем JSFIDDLE, чтобы опробовать его –

. Не забывайте, что у меня есть абсолютное/относительное позиционирование – GogromaT

Вы хотите, чтобы они отображались в виде ячеек таблицы?

.holder { 
    width: 300px; 
    height: 90px; 
    display: table; 
} 

.left, .right, .center { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

http://jsfiddle.net/c5L6tLt0/20/

источник

2014-11-25 14:20:01 Phil

Удалите следующий .holder CSS, как @Adnan сказал и добавьте следующие

.left .right .center { 
     max-width: 200px; 
     overflow: auto; 
}

перелива свойства добавит скроллбар когда ваше содержание превышает 200 х 60 размера.

источник

2014-11-25 14:56:26 ChintanShah25

это заставило меня в итоге: http://jsfiddle.net/gogromat/c5L6tLt0/26/, но та же проблема - содержание идет вниз, так что да ... – GogromaT

это http://jsfiddle.net/gogromat/oug49f6y/ намного ближе к тому, что мне нужно, но было бы здорово полностью скрыть .центр при сокращении – GogromaT

Ширина позиционирования CSS

ответ

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