반응형 비슷한 html
본문
html코드가 지극히 제한적인 에디터에서 아래와 같은 글을 씁니다.
<style>
#wrap {width:100%; max-width:700px; overflow:hidden; margin:0 auto; background:#aaa; padding:10px;}
.item {display:table; width:100%; max-width:350px; min-width:50%; table-layout:fixed; float:left;}
.item div {display:table-cell; min-width:100px; max-width:100%; height:120px; background:#f0f0f0; list-style:none; border-bottom:1px solid #ddd;}
</style>
<style>
#wrap {width:100%; max-width:700px; overflow:hidden; margin:0 auto; background:#aaa; padding:10px;}
.item {display:table; width:100%; max-width:350px; min-width:50%; table-layout:fixed; float:left;}
.item div {display:table-cell; min-width:100px; max-width:100%; height:120px; background:#f0f0f0; list-style:none; border-bottom:1px solid #ddd;}
</style>
<div id="wrap">
<div class="item">
<div> 1</div>
<div> 2</div>
<div> 3</div>
</div>
<div class="item">
<div> 4</div>
<div> 5</div>
<div> 6</div>
</div>
</div>
자바스크립트 안되고 <style> 안됩니다(위는 이해를 돕기위해) 아주 제한적인 코드만 가능합니다
인라인 코드만 가능합니다
즉, 위와같은 게시물에서 브라우저가 가로 700 이하로 줄었을때 가로3개로된 .item이 밑으로 밀리게 되는데요
이때 100%로 채워질 수 있는 방법이 있는가 해서요
<style>가 안되니 당연히 미디어쿼리 안됩니다 ㅠㅠ 가상선택자도 안됩니다ㅠㅠ
단순 html css로 어찌 안될까요? ㅠㅠ
