0
flexbox를 사용하여 상자를 만들려고합니다. 세 개의 작은 상자가 안에 있습니다.Flexbox formating issue
아래 코드는 휴대용 컴퓨터의 큰 화면 디스플레이에서 작동하지만 모바일 화면에서 검토하면 세 번째 상자의 너비가 더 작아 보입니다. 내 코드를 확인했지만이 문제를 일으키기 위해 내가 한 일이 보이지 않습니다. 따라서 사실 이것이 플렉스 박스 문제인지 잘 모르겠습니다.
두 번째 스크린 샷에서 Firefox로 볼 때 서식이 약해집니다. 내가 미리 ... 이것은 FF 또는 인 flexbox 문제가 있는지 확인하기 위해 reseraching
많은 감사를 사투를 벌인거야
[wpv-layout-start]
[wpv-items-found]
<div class="row flexbox-wrap">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-sm-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions [wpv-post-slug]">
[wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
</div>
</article>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
CSS 스타일
/* The following code formats the modal box subscription results for services that can be selected after the Join Now button is pressed. This information is seen on the join now auth page as well as the signup page, its controlled by this toolset view, with the custom code above to pull back the results. */
.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions {position: absolute; bottom: 0; left: 0; right: 0; text-align: -webkit-center; padding-bottom: 10px;}
.well-actions.school-nursery-plan {background-color: #fdd731; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-yearly-plan {background-color: #db2230; margin-top: 22px !important; padding-top: 12px;}
.well-actions.standard-monthly-plan {background-color: #1e76b7; margin-top: 22px !important; padding-top: 12px;}
컴퓨터의 브라우저 창 크기를 조정하면 페이지가 _mobile layout_으로 이동하고 "월간 요금제"요소를 마우스 오른쪽 버튼으로 클릭하면 팝업에서 "검사"(또는 이와 유사한 옵션)를 선택할 수 있습니다. 거기에서 요소와 속성/레이아웃을 볼 수 있으며 잘못된 점을 읽을 수 있습니다. 또한 HTML과 CSS를 포착하고, 우리와 공유 할 수있는 코드 스 니펫을 작성하고, 문제를 재현하고, 쉽게 도움을 줄 수 있습니다. – LGSon
제 3의 상자에는 텍스트의 전체 행이 없기 때문에 다른 모든 상자와 마찬가지로 텍스트가 들어가기에 충분하다고 생각합니다. 너비 : 100 % ?? – sferret