Сегодня я попытался изменить размер <div> с помощью CSS. Он работает в настольных браузерах, таких как Safari, Firefox и Chrome, но не работает на iPad.
Я хочу реализовать изменение размера <div> без использования JavaScript. С помощью свойства resize CSS пользователь может просто перетащить <div> s, чтобы изменить его размер.
Согласно собственной документации Apple, resize поддерживается на iOS начиная с версии 1 , но я не вижу, как изменить размер <div> на iOS.
http://jsfiddle.net/dQuX7/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox resize</title>
<style>
section {
width: 800px;
display: -webkit-box;
display: -moz-box;
display: box;
}
div.left, div.right {
outline: solid 1px #ccc;
overflow: auto;
}
div.left {
width: 20%;
resize: both;
}
div.right {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
</style>
<body>
<section>
<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</section>
</body>
</html>