CSS로 플로트 탑을 어떻게 만들 수 있습니까?
CSS는 float 속성에 대해 왼쪽 및 오른쪽 값만 지원한다는 것을 알고 있지만 부동 상단을 구현하는 기술이 있습니까? 나는 설명하려고 노력할 것이다. 다음 코드가 있습니다.
<div style="float:left">
<div style="float:left">
<div style="float:left">
....
이 코드를 사용하면 페이지의 오른쪽 한계에 도달 할 때까지 모든 div가 왼쪽으로 떠 있습니다. 나는 똑같은 일을하고 싶지만 수직으로 모든 div가 이전 div의 하단에 배치되고 페이지의 하단 한계에 도달하면 새 열이 생성됩니다. CSS 만 사용하고 HTML 코드를 편집하는 방법이 있습니까?
CSS만으로이 작업을 수행하는 유일한 방법은 모든 브라우저에서 작동하지 않는 CSS 3를 사용하는 것입니다 (FF 3.5, Opera, Safari, Chrome과 같은 최신 세대 만 해당).
실제로 CSS 3에는 다음과 같이 사용할 수있는 column-count라는 멋진 속성이 있습니다.
#myContent{
column-count: 2;
column-gap: 20px;
height: 350px;
}
#myContent가 다른 div를 래핑하는 경우.
자세한 정보 : http://www.quirksmode.org/css/multicolumn.html
거기에서 읽을 수 있듯이 이것을 사용하는 데 심각한 제한이 있습니다. 위의 예에서는 콘텐츠가 오버플로되는 경우에만 다른 열에 추가됩니다. Mozilla에서는 필요한만큼 많은 열로 콘텐츠를 나눌 수있는 column-width 속성을 사용할 수 있습니다.
그렇지 않으면 자바 스크립트 또는 백엔드의 여러 div간에 콘텐츠를 배포해야합니다.
간단히 사용 vertical-align:
.className {
display: inline-block;
vertical-align: top;
}
Hugogi Raudel은이 를 달성하는 흥미로운 방법을 제시했습니다 CSS. 여기에 HTML마크 업 이 있다고 가정합니다 .
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
다음 CSS코드를 사용하여 3 행 열을 얻을 수 있습니다 .
li:nth-child(3n+2){
margin: 120px 0 0 -110px;
}
li:nth-child(3n+3) {
margin: 230px 0 0 -110px;
}
최종 결과는 다음과 같습니다.
여기서 우리가하는 일은 행의 각 항목에 대해 적절한 여백을 추가하는 것입니다. 이 접근 방식 제한은 열 행 수를 결정해야한다는 것입니다. 그것은 역동적이지 않을 것입니다. 유스 케이스가 있다고 확신하므로 여기에이 솔루션을 포함했습니다.
- 다음은 라이브 데모입니다. http://codepen.io/HugoGiraudel/pen/DoAIB
- Hugo의 블로그 게시물 에서 이에 대한 자세한 내용을 읽을 수 있습니다.
없음 float:top, 만 float:left및float:right
div를 서로 아래에 표시하려면 다음을 수행해야합니다.
<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
나도 해결책을 원하기 때문에 재미로 이것을 시도했습니다.
바이올린 : http://jsfiddle.net/4V4cD/1/
html :
<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>
css :
#container {
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}
.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}
나는 이것이 더 크고 더 넓은 div에서 작동하는 것을 볼 수 있습니다. 옆으로 생각해야합니다. 포지셔닝이 문제가 될 것이라고 생각합니다. transform-origin은 도움이 될 것입니다.
나는 당신이 말하는 것을 성취하는 가장 좋은 방법은 당신의 열이 될 div 세트를 가지고 당신이 설명 한 방식으로 채우는 것입니다. 그런 다음 해당 div를 말하는 내용으로 세로로 채 웁니다.
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}
그러나 div의 요소 수가 고정되어 있지 않거나 얼마나 될 수 있는지 모르는 경우에도 여전히 JS가 필요합니다. jQuery 사용 :even,:odd
나는 JQuery로 만듭니다.
Firefox와 IE10에서 테스트했습니다.
내 문제에서 항목의 높이가 다릅니다.
<!DOCTYPE html>
<html>
<head>
<style>
.item {
border: 1px solid #FF0;
width: 100px;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
function itemClicked(e) {
if (navigator.appName == 'Microsoft Internet Explorer')
e.removeNode();
else
e.remove();
reposition();
}
function reposition() {
var px = 0;
var py = 0;
var margeY = 0;
var limitContainer = $('#divContainer').innerHeight();
var voltaY=false;
$('#divContainer .item').each(function(key, value){
var c = $(value);
if ((py+c.outerHeight()) > limitContainer) {
px+=100;
margeY-=py;
py=0;
voltaY=true;
}
c.animate({
left:px+'px',
top:margeY+'px'
});
voltaY=false;
py+=c.outerHeight();
});
}
function addItem() {
$('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>');
reposition();
}
</script>
<div id="divMarge" style="height: 100px;"></div>
<div id="divContainer" style="height: 200px; border: 1px solid #F00;">
<!--div class="item"></div-->
</div>
<div style="border: 1px solid #00F;">
<input type="button" value="Add Item" onclick="addItem();" />
</div>
</body>
</html>
CSS3를 사용하여이를 달성하려면 내가 당신을 제대로 이해하고있는 한 그렇게 어렵지 않을 것입니다. HTML DIV가 다음과 같다고 가정 해 보겠습니다.
<div class="rightDIV">
<p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
<p>Some content</p>
</div>
그리고 CSS는 다음과 같습니다. 다음 CSS가 수행하는 작업은 DIV가 왼쪽 부동을 실행하도록 만드는 것입니다. 그러면 부모 DIV 요소의 왼쪽에 "고정"됩니다. 그런 다음 "top : 0"을 사용하면 브라우저 창 상단에 "고정"됩니다.
#rightDIV {
float: left
top: 0
}
#leftDIV {
float: right;
top: 0
}
다음은 FF, Opera, Chrome에서 작동하는 (거의 완벽한) 솔루션입니다.
<style>
html {height:100%}
p {page-break-inside:avoid;text-align:center;
width:128px;display:inline-block;
padding:2px;margin:2px;border:1px solid red; border-radius: 8px;}
a {display:block;text-decoration:none}
b {display:block;color:red}
body {
margin:0px;padding:1%;
height:97%; /* less than 98 b/c scroolbar */
-webkit-column-width:138px;
-moz-column-width:138px;
column-width:138px;
}
</style>
<body>
<p><b>title 1</b>
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
<a>link 4</a>
</p>
<p><b>title 2</b>
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
<a>link 4</a>
<a>link 5</a>
</p>
</body>
트릭은 P에서는 "page-break-inside : avoid"이고 BODY에서는 열 너비입니다. 동적 열 수와 함께 제공됩니다. A의 텍스트는 여러 줄로되어 있고 블록의 높이가 다를 수 있습니다.
누군가 Edge와 IE를위한 무언가를 가지고있을 수도 있습니다.
나를 위해 일한 트릭은 div 정렬 기간 동안 쓰기 모드를 변경하는 것이 었습니다.
.outer{
/* Limit height of outer div so there has to be a line-break*/
height:100px;
/* Tell the browser we are writing chinese. This makes everything that is text
top-bottom then left to right. */
writing-mode:vertical-lr;
}
.outer > div{
/* float:left behaves like float:top because this block is beeing aligned top-bottom first
*/
float:left;
width:40px;
/* Switch back to normal writing mode. If you leave this out, everything inside the
div will also be top-bottom. */
writing-mode:horizontal-tb;
}<div class="outer">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>이것은 작동합니다 ul.
display:flex;
flex-direction:column;
flex-wrap:wrap;
형제 선택 자로 무언가를 할 수 있습니다. 예 :
div + div + div + div{
float: left
}
그것을 시도하지 않았지만 이것은 4 번째 div가 당신이 원하는 것을 할 수 있습니다. 다시 완전히 지원되지 않습니다.
이 질문이 오래되었다는 것을 알고 있습니다. 그러나 오늘 그것을 원하는 사람은 여기 있습니다.
div.floatablediv{
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
div.floatcontainer{
-webkit-column-count: 2;
-webkit-column-gap: 1px;
-webkit-column-fill: auto;
-moz-column-count: 2;
-moz-column-gap: 1px;
-moz-column-fill: auto;
column-count: 2;
column-gap: 1px;
column-fill: auto;
}<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
<div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
</div>
<div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">
</div>
<div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">
</div>
<div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">
</div>
<div style="clear:both;"></div>
</div>참고 URL : https://stackoverflow.com/questions/1847460/how-can-i-make-a-float-top-with-css
'Nice programing' 카테고리의 다른 글
| Java 8에서 추상 클래스와 인터페이스의 차이점은 무엇입니까? (0) | 2020.11.21 |
|---|---|
| 프로그래밍 방식으로 이미지를 만화 화하는 방법은 무엇입니까? (0) | 2020.11.21 |
| XMPP의 "명단"은 무엇입니까? (0) | 2020.11.21 |
| 장고 등록 후 자동으로 로그인하는 방법 (0) | 2020.11.21 |
| 모든 브라우저에서 jQuery를 사용하여 localStorage 변경 이벤트에 바인딩하는 방법은 무엇입니까? (0) | 2020.11.21 |