바이올린 : http://jsfiddle.net/WsYw8/
내가 말하는 것에 대한 데모 : http://netkoder.dk/test/test0251.html
HTML
<div class="spotlysholderholder baggrundlinear1 bordertype1 borderradius5px">
<div class="spotlysholderholderb" style="width: 3200px;">
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
<div class="clearboth"></div>
</div>
</div>
CSS
.spotlysholderholder {
overflow-x: auto;
}
.spotlysholderholderb {
padding: 4px;
margin: 0 auto;
/* width: 800px;*/
}
.spotlysholderholderb a,
.spotlysholderholderb a:visited,
.spotlysholderholderb a:active {
color: #222;
}
.spotlysholder {
text-align: center;
width: 180px;
float: left;
margin: 4px;
padding: 5px;
text-decoration: none;
/* for at undgå at langeordudenmellem ikke går ud over kanten */
overflow: hidden;
text-overflow: ellipsis;
}
.spotlysholder:hover {
background: #ccc;
text-decoration: underline;
border-color: black;
}
.spotlyoverskrift {
display: block;
font-weight: bold;
color: maroon;
}
.spotlysbillede {
margin: 5px auto;
vertical-align: bottom;
}
.baggrundlinear1 {
background-color: #445263; /* fallback */
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset -2px 0 2px rgba(0, 0, 0, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 2px 0 2px rgba(255, 255, 255, 0.4);
}
.bordertype1 {
border: 1px solid #7c7c7c; /* fallback farve når rgba ikke virker */
border: 1px solid rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.25);
}
.background_color_2 {
background-color: #ddd; /* fallback */
}
.borderradius5px {
border-radius: 5px;
}
.spotlysbillede {
margin: 5px auto;
vertical-align: bottom;
}
.clearboth {
clear: both;
}
16 개의 상자가있는 스크롤 요소가 있습니다.
각 상자의 너비는 패딩을 포함하여 200 픽셀입니다.
그것들을 모두 같은 줄에 얻기 위해 부모 컨테이너 elemenet 16 * 200 픽셀 너비를 만듭니다. 16 개의 상자가 있으면 너비를 3200px로 만듭니다.
두 가지 문제가 있습니다.
1 : 부모 컨테이너 요소의 너비를 설정하지 않고 모든 상자를 같은 줄에 유지하려면 어떻게해야합니까?
2 : 브라우저를 사용하여 축소하면 마지막 상자가 2 줄로 아래로 점프합니다.
전체 너비에 대한 지식없이 모든 상자를 정렬하는 가장 간단한 솔루션 은 부동 요소 display: inline-block
대신와 함께 white-space: nowrap;
사용 하는 것입니다 . 확대 / 축소하는 동안 깨지지 않습니다. -element를 사용하는 것은 단지 예일뿐입니다. 페이지의 일부만 가로로 스크롤 할 수 있어야하는 경우 동일한 스타일이 적용된 (예제에 충실하기 위해)와 같은 래퍼를 사용할 수도 있습니다 .<body>
<div class="spotlysholderholderb">
HTML
<div>
<img src="http://placehold.it/200x100" alt="">
<p>Box 1</p>
</div>
<div>
<img src="http://placehold.it/200x100" alt="">
<p>Box 2</p>
</div>
CSS
body {
font-size: 0;
line-height: 0;
white-space: nowrap;
}
div {
display: inline-block;
width: 200px;
font-size: 14px;
line-height: 20px;
}
데모
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다