선택한 div를 확장하고 나머지 공간에 맞게 동일하게 확장하여 다른 div를 적절하게 작동시킬 수있는 스크립트 (여기서는 사용자의 도움으로)를 코딩했습니다 (너비가 고정 된 첫 번째 제외).
그리고 여기 내가 달성하고자하는 그림이 있습니다.
이를 위해 플렉스와 전환을 사용합니다.
잘 작동하지만 jQuery 스크립트는 "400 %"스트레치 값을 지정합니다 (테스트에 적합 함).
이제 선택한 div를 "400 %"고정 값 대신 내용에 정확히 맞게 확장 / 축소하고 싶습니다.
어떻게 할 수 있을지 모르겠습니다.
가능합니까?
div를 복제하고 내용에 맞추고 값을 얻은 다음이 값을 사용하여 전환했지만 초기 너비는 백분율이지만 목표 값은 픽셀입니다. 작동하지 않습니다.
픽셀 값을 백분율로 변환하면 결과가 어떤 이유로 든 내용에 정확하게 맞지 않습니다.
모든 경우에, 이것은 어쨌든 내가 원하는 것을 달성하는 약간 복잡한 방법으로 보입니다.
선택한 div의 내용에 맞게 전환 할 수있는 flex 속성이 없습니까?
코드는 다음과 같습니다 ( 더 나은 읽기를 위해 편집 / 간단 화됨 ).
var expanded = '';
$(document).on("click", ".div:not(:first-child)", function(e) {
var thisInd =$(this).index();
if(expanded != thisInd) {
//fit clicked fluid div to its content and reset the other fluid divs
$(this).css("width", "400%");
$('.div').not(':first').not(this).css("width", "100%");
expanded = thisInd;
} else {
//reset all fluid divs
$('.div').not(':first').css("width", "100%");
expanded = '';
}
});.wrapper {
overflow: hidden;
width: 100%;
margin-top: 20px;
border: 1px solid black;
display: flex;
justify-content: flex-start;
}
.div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
text-align:center;
}
.div:first-child {
min-width: 36px;
background: #999;
}
.div:not(:first-child) {
width: 100%;
transition: width 1s;
}
.div:not(:first-child) span {
background: #ddd;
}
.div:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the div you want to fit/reset (except the first div)
<div class="wrapper">
<div class="div"><span>Fixed</span></div>
<div class="div"><span>Fluid (long long long long long text)</span></div>
<div class="div"><span>Fluid</span></div>
<div class="div"><span>Fluid</span></div>
</div>jsfiddle은 다음과 같습니다.
https://jsfiddle.net/zajsLrxp/1/
편집 : 여기 당신의 도움으로 작업 솔루션이 있습니다 (창 크기 조정 + div 수와 첫 번째 열의 너비가 동적으로 계산되어 업데이트 됨).
var tableWidth;
var expanded = '';
var fixedDivWidth = 0;
var flexPercentage = 100/($('.column').length-1);
$(document).ready(function() {
// Set width of first fixed column
$('.column:first-child .cell .fit').each(function() {
var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
});
$('.column:first-child' ).css('min-width',fixedDivWidth+'px')
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})
$(window).resize( function() {
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
})
$(document).on("click", ".column:not(:first-child)", function(e) {
var thisInd =$(this).index();
// if first click on a fluid column
if(expanded != thisInd)
{
var fitDivWidth=0;
// Set width of selected fluid column
$(this).find('.fit').each(function() {
var c = $(this)[0].getBoundingClientRect().width;
if( c > fitDivWidth ){fitDivWidth = c;}
});
tableWidth = $('.mainTable')[0].getBoundingClientRect().width;
$(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
// Use remaining space equally for all other fluid column
$('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
expanded = thisInd;
}
// if second click on a fluid column
else
{
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
}
});body{
font-family: 'Arial';
font-size: 12px;
padding: 20px;
}
.mainTable {
overflow: hidden;
width: 100%;
border: 1px solid black;
display: flex;
margin-top : 20px;
}
.cell{
height: 32px;
border-top: 1px solid black;
white-space: nowrap;
}
.cell:first-child{
background: #ccc;
border-top: none;
}
.column {
border-right: 1px solid black;
transition: flex 0.4s;
overflow: hidden;
line-height: 32px;
text-align: center;
}
.column:first-child {
background: #ccc;
}
.column:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>
<div class="mainTable">
<div class="column">
<div class="cell"><span class="fit">Propriété</span></div>
<div class="cell"><span class="fit">Artisan 45</span></div>
<div class="cell"><span class="fit">Waterloo 528</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Adresse</span></div>
<div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
<div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Commune</span></div>
<div class="cell"><span class="fit">Ixelles</span></div>
<div class="cell"><span class="fit">Watermael-Boitsfort</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Ville</span></div>
<div class="cell"><span class="fit">Marche-en-Famenne</span></div>
<div class="cell"><span class="fit">Bruxelles</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Surface</span></div>
<div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
<div class="cell"><span class="fit">350 m<sup>2</sup></span></div>
</div>
</div>그리고 다음은 직장에서 본격적인 예입니다 (스타일 + 패딩 + 더 많은 데이터).
https://jsfiddle.net/zrqLowx0/2/
모두 감사합니다 !
1
이 모든 것 이후에 만든 것을 보여주는 질문에 최종 결과 를 추가 할 수있을만큼 친절 하십시오. 나는 그것이 어떻게 보이는지에 정말로 관심이 있습니다. 감사! (... 어떻게 사용되는지에 대한 통찰력이 있을까요? ...)
—
Rene van der Lende
좋아, 모든 불필요한 요소에서 스크립트를 청소하자마자 그렇게 할 것입니다 (몇 분 안에 추측합니다). 즉, 어떻게해야합니까? Azametzin의 답변이 완벽하게 되더라도 원본 게시물을 편집하고 이에 대한 테이크를 추가합니까? 나는 몇 가지 사항을 변경하지만 90 % 동일합니다. (하지만 보여
—
드리게되어 기쁩니다
요점은 다음과 같습니다. 저는 일종의 Excel 스프레드 시트를 에뮬레이트하고 사람들이 내용에 맞게 특정 열을 클릭 할 수 있기를 바랍니다. 일반적으로 테이블은 수행하지만 원하는 방식으로 열 크기를 조정할 때 열이 올바르게 작동하지 않습니다 (한 번에 한 열을 쉽게 확장 할 수 있지만 나머지 공간을 차지하기 위해 다른 열을 실시간으로 수행하기는 어렵습니다) flex는 div를 위해 할 것입니다. table 또는 dataTable을 사용하지 않는 다른 이유가 있지만이 게시물의 범위를 벗어납니다.
—
Bachir Messaouri 1
쉽게 '편집'을 누르고 질문의 끝으로 가서 새로운 스 니펫 (모두 포함)을 포함하여 유능한 숙고를 추가하십시오. '새 독자'에게는 방해가되지 않고 기본적으로 '스 니펫 숨기기'(왼쪽 아래 확인란)를 숨기십시오. 내 첫 번째 생각은 당신이 멋진 '하모니카'와 같은 위젯, 아이콘 및 모두에 사용할 것이라고 생각했습니다. 스프레드 시트 허, 나는 여기에 논의 된 것과 동일한 원칙을 사용하여 위 / 아래 / 왼쪽 / 오른쪽으로 모든 화면을 확장하는 전체 화면을 가지고 있습니다 (관심있는 경우).
—
레네 반 데르 렌데
최종 결과를 게시하면서 여분의 마일을 보냈습니다. 훨씬 더 보람있는 질문에 답변합니다! Cudos ...
—
르네 반 데르 Lende