div 태그와 CSS를 사용하여 테이블과 비슷한 디자인

저는 HTML과 CSS에 익숙하지 않아서 대답하기가 쉽지 않을 것입니다. 그렇다면 정말 미안합니다.div 태그와 CSS를 사용하여 테이블과 비슷한 디자인

페이지를 제대로 설정하여 반응 형이되도록하는 방법에 대해 조사했습니다. 원래는 웹 페이지 중 하나에서 이미지와 설명을 정리하기 위해 테이블을 사용했습니다. (내가 여기을 참조로 남겨 두었습니다.) 그 때 그것이 내 전화기에 제대로 나타나지 않는다는 것을 알아 냈습니다. 약간의 연구를 마친 후에 나는 처음에는 테이블을 사용해서는 안되며 div 태그와 CSS를 사용하는 것이 더 나은 해결책이라는 결론에 도달했습니다.

화면 크기가 바뀌면서 이미지가 제대로 표시되고 크기가 적절하게 조정됩니다. 그러나 해설을 이미지의 오른쪽에 표시하고 이미지의 세로 가운데에 배치하는 방법을 모르겠습니다. 이상적으로, 화면이 특정 크기보다 작아지면 해설을 이미지 아래로 움직이는 것이 좋습니다. 여기에 제가 설정하려고 시도한 것입니다 : www.maddielabstudio.com/artwork. 기본적으로 테이블로 만든 페이지처럼 보이기를 원하지만 응답 성이 좋고 필요에 따라 이미지 크기를 줄이며 전화 화면 크기가 커지면 해설을 이미지 아래로 옮길 수 있습니다.

도움이나 의견을 크게 주시면 감사하겠습니다. 감사!

출처

2013-10-02 keller8899

스켈레톤 (http://www.getskeleton.com)과 같은 반응 형 그리드 시스템을 사용하는 것이 좋습니다. 그들은 사용하기 쉽고, 당신을 위해 많은 노력을 할 것입니다!

또한 - 이미지 크기 조정이 시도 :

img { 
    max-width: 100%; 
}

출처

2013-10-02 13:28:52

안녕하세요, 실제로'code'img {max-width : 100 % :}'code'를 이미 알아 냈습니다. 감사합니다. 그 골격은 꽤 굉장해 보입니다. 나는 그것을 시도해야 할 것이다. – keller8899

해골에 얼마나 친숙합니까? 이것이 초보자 용 질문 일지 모르지만 내 자식 테마에 skeleton.css 파일을 인식 시키려면 어떻게해야합니까? 복사하여 내 style.css 파일에 붙여 넣으면 작동하지만 그 일을하는 가장 좋은 방법은 아닌 느낌입니다. – keller8899

이 이미지의 오른쪽에있는 논평을 얻으려면,이 작업을해야합니다

이 float:left를 제거하고 .artwork 스타일 display:inline-block을 추가합니다. .commentary 스타일에 display:inline-block을 추가하십시오.

세로 맞춤의 경우 해당 span 태그에 vertical-align:middle을 설정할 수 있습니다.

출처

2013-10-02 13:54:14 Ant

이 제안에 감사드립니다. 오른쪽의 해설을 얻기 위해 노력했지만 작은 화면의 이미지 아래 해설을 옮기는 데는 아무 것도하지 않습니다. 다른 좋은 해결책을 찾을 수 없다면 나는 그것에 의지 할 수 있습니다. – keller8899

div 태그와 CSS를 사용하여 테이블과 비슷한 디자인

답변

관련 문제