2개 블럭을 행으로 표시
본문
안녕하세요 맘에 드는 내용이 있어 수정하여 사용하려 하는데요
이렇게 2개 열로 되어 있는 것을
이렇게 만들어 보고 싶은데 어디를 어떻게 수정 하면 될까요?
코드는 아래 와 같이
--------------- 첫번째 첫번째 블럭-------------------------
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"align":"full","id":37,"sizeSlug":"full"} -->
<figure class="wp-block-image alignfull size-full"><img src="http://heohunxp.ddns.net/wordpress/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-1.png" alt="" class="wp-image-37"/></figure>
-----------------------첫번째 내용 끝 ---------------------------
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3>Works and Days</h3>// 삽입 텍스트
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>August 1 -- December 1</p>//삽입 텍스트
<!-- /wp:paragraph -->
--------------버튼------------------------------
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="https://make.wordpress.org/core/2019/09/27/block-editor-theme-related-updates-in-wordpress-5-3/">Read More</a></div>
<!-- /wp:button --></div></div>
<!-- /wp:group -->
<!-- wp:group -->
-------------------------첫번째 블럭 끝-------------------------
------------------------두번째 블럭 시작---------------------------
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"align":"full","id":37,"sizeSlug":"full"} -->
<figure class="wp-block-image alignfull size-full"><img src="http://heohunxp.ddns.net/wordpress/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-3.png" alt="" class="wp-image-37"/></figure>
-------------------------두번째 내용 끝------------------------------
<!-- /wp:image -->
<!-- wp:heading {"level":3} -->
<h3>Theatre of Operations</h3>//내용 삽입
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>October 1 -- December 1</p>//내용 삽입
<!-- /wp:paragraph -->
------------------------------버튼-----------------------------------
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="https://make.wordpress.org/core/2019/09/27/block-editor-theme-related-updates-in-wordpress-5-3/">Read More</a></div>
<!-- /wp:button --></div></div>
------------------------------두번째 내용끝----------------
<!-- /wp:group --></div>
<!-- /wp:column -->
고수님들 답변 부탁 드립니다.꾸벅
답변 2
css가 어떻게 되어있나는 모르겠습니다만.. 아래처럼 하셔야 하는데요..
다른 css의 영향이 있을 수 있습니다.
다른 css 영향이 없다면 옆으로 붙게 됩니다.
.wp-block-column .wp-block-group{float:left;width:50%;margin:0;padding:0;}
<div class="wp-block-column"> 아래에 <div class="wp-block-group"> 이 들어가니깐
스타일이 어떻게 적용되어 있는지 모르겠지만, wp-block-group에 width 값을 주면 될것 같습니다