두 개의 부동 div 및 텍스트가 아닌 요소가있는 문제

Question

래퍼 div (ctccon)를 만들었습니다. 두 div가 서로 왼쪽 옆에 위치하도록 왼쪽 div가 있습니다. 오른쪽 div (conright) 안에 이미지 또는 표를 추가하고 추가 된 요소가 왼쪽 div (conleft) 아래로 밀리 될 때까지 제대로 작동합니다.

내 CSS를

.ctccon { 
    font-family: 'Comfortaa', cursive; 
    color: #8c8c8c; 
    overflow: hidden; 
} 

.ctccon .conleft { 

    float:left; 
    width:40%; 
    font-size:0.7em; 

} 

.ctccon .conright { 
    float:left; 
    font-size:1em; 
} 

그리고 (추가 요소가없는) 내 HTML

<div class="ctccon"> 
    <div class="conleft"> This is the left div </div> 
    <div class="conright">This is the right div </div> 
</div> 

과와 추가 요소

내가 아는

<div class="ctccon"> 
    <div class="conleft"> This is the left div </div> 
    <div class="conright">This is the right div <img src="pic1.jpg"> </div> 
</div> 

아마 내가 다시 이해하지 않은 무언가 수레가 있지만 해결책을 찾지 못했습니다. 어떤 포인터?

----- 업데이트 ------- 이후 이미지를 삭제하고 안쪽에 테이블을 추가했습니다. 그럼에도 불구하고 아래의 이미지에 따라 동일한 문제가 점점 :

Answer 1

당신이 오류의 이미지를 공유하지만 경우가 더 좋을 것입니다 :

을 나는 이미지와 코드를 재 작성하고, 테이블 , 그리고 그것은 다른 div의 하단에 밀어 넣지 않습니다.

그러나 내가 당신에게 일어나는 될 일을 설명하자

1 : 당신은 그들 중 하나가 공간을 갖고 얻는 경우에, 그것은 다른 사업부 아래에 자신을 넣어 것입니다, 왼쪽 밀려 2 DIV가 , 왜? 왼쪽으로 밀어 넣기 때문에!, 왼쪽으로 밀면 옆에 아무 것도 없습니다. 그 공간을 차지하고 의도 한대로 할 것이며, 떠날 것입니다.

2 : div를 오른쪽으로 유지하려면 CSS 코드 float RIGHT를 넣고 왼쪽 div를 무시하면 오른쪽에 표시됩니다 (전체 화면을 차지하지 않는 한).

3 : 이미지에 다른 div가 사용할 수있는 공간의 60 % 남은 부분이 더 많이 걸리는 경우 이미지에 맞게 버튼을 누르면됩니다.

난 당신이 당신의 conright의 사업부에서 코드에이를 추가 할 수 있다고 생각 문제를 해결하려면이 DIV의 폭을 지정 해달라고하면 때문에?

.ctccon .conright { 
    float:left; 
    font-size:1em; 
    width: 60%; 
} 

왜 당신이 여기에있다 않으며, 그 내용은 60 %가 더 많은 공간을 차지합니다, 그것은 바닥에 밀어 넣을 것입니다

귀하의 질문에 대답하지 못할 경우 귀하의 오류 사진을 제공하십시오. 이미지의 크기에 따라 달라집니다

Answer 2

:

텍스트 플러스 이미지가 처음 DIV 왼쪽 공간보다 넓은 될 경우, 그것은 첫 번째 DIV 아래로 이동합니다.

하지만 두 번째 div에 너비를 추가하여 최대 60 %의 너비가 작동하도록 할 수 있습니다.

추가/조각은 다음과 같이

.ctccon { 
 
    font-family: 'Comfortaa', cursive; 
 
    color: #8c8c8c; 
 
    overflow: hidden; 
 
} 
 

 
.ctccon .conleft { 
 
    float: left; 
 
    width: 40%; 
 
    font-size: 0.7em; 
 
} 
 

 
.ctccon .conright { 
 
    width: 60%; 
 
    float: left; 
 
    font-size: 1em; 
 
}

<div class="ctccon"> 
 
    <div class="conleft"> This is the left div </div> 
 
    <div class="conright">This is the right div <img src="http://placehold.it/400x300"> </div> 
 
</div>

Answer 3

수레가 작동을 만들려고하면, 난 그냥 대신 그리드를 사용하여 종료와 CSS 코드를 수정 :

.ctccon { 
display: grid; 
grid-template-columns: 1fr 2fr; 
grid-gap: 20px; 
font-family: 'Comfortaa', cursive; 
color: #8c8c8c; 
} 

.conleft { 

    font-size:0.7em; 

} 

.conright { 
    font-size:1em; 
} 

이제 얻으려는 레이아웃을 얻었습니다.

이렇게하면 웹 사이트를 더 쉽게 만들 수있게 될 것입니다. scss와 breakpoints를 사용하기 때문에 각 breakpoint에 대해 CSS를 약간 변경해야합니다.