Question

我想簡單地插入div的div！但它不工作！ 它顯示它在外部？

輸出：

HTML：

echo "<br> 
     <div class='data_block'> 
     <img src='data:image/jpeg;base64,".base64_encode($row['ar_image'])."' class='data_image'/> 
     <div class='data_title'>". $row['ar_title']."</div> 
     <div class='data_desc'>".$row['ar_desc']."</div> 
     </div>"; 

CSS：

.data_title 
{ 
    font-size:20px; 
    font-family: "Century Gothic"; 
    font-weight:600; 
    float: right; 
    width:500px; 
    margin-top:20px; 
    margin-right:20px; 
    text-align:center; 
} 

.data_desc 
{ 
    font-size:15px; 
    font-family: "Century Gothic"; 
    width:500px; 
    text-align:center; 
} 

Answer 1

我刪除了你的寬度和浮在水面文字的權利。我也把你的文字放入段落標籤。必須調整描述中的保證金權利才能與標題內聯。這裏是一個fiddle

.data_block { 
 
    background-color: #EFEFEF; 
 
    width: 95%; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-bottom-left-radius: 20px; 
 
    border-top-right-radius: 30px; 
 
    overflow: hidden; 
 
} 
 
.data_image { 
 
    width: 200px; 
 
    height: 100%; 
 
    border-bottom-left-radius: 20px; 
 
} 
 
.data_desc { 
 
    font-size: 15px; 
 
    font-family: "Century Gothic"; 
 
    float: right; 
 
    text-align: center; 
 
    margin-right: -60px; 
 
} 
 
.data_title p { 
 
    font-size: 20px; 
 
    font-family: "Century Gothic"; 
 
    font-weight: 600; 
 
    vertical-align: top; 
 
    float: right; 
 
    margin-top: -20px; 
 
    margin-right: 20px; 
 
    text-align: center; 
 
}

<div class='data_block'> 
 
    <img src='data:image/jpeg;base64,".base64_encode($row[' ar_image '])"' class='data_image' /> 
 
    <div class='data_title'> 
 
    <p>gdfgdf</p> 
 
    </div> 
 
    <div class='data_desc'> 
 
    <p>fhdhfisdhfi</p> 
 
    </div> 
 
</div>

Answer 2

我包含在最低限度，使其工作，它可能不是你所需要的東西，但它應該指向你到正確的方向。

我也改變了一些HTML標籤，使之更加語義

HTML：

<div class='data-block cf'> 
    <img class="data-image" src="http://lorempixel.com/200/200" alt="image" /> 
    <h2 class='data-title'>Title here</h2> 
    <p class='data-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam veniam ipsa, ea nostrum eos possimus eaque accusantium deserunt quod!</p> 
</div> 

CSS

.data-block { 
    background-color: #EFEFEF; 
    width: 90%; 
    margin: 10px auto; 
    border-bottom-left-radius: 20px; 
    border-top-right-radius: 30px; 
    overflow: hidden; /* To make the border radius work */ 
} 

.data-image { 
    width: 200px; 
    float: left; 
} 

.data-title { 
    width: clac(100% - 200px); /* 200px is the image */ 
    text-align: center; 
} 

.data-desc { 
    width: calc(100% - 200px); 
    /* 200px is the image, 
    if you set a smaller width other than 100% remember to compensate with: 
    margin-left: (your-width/2) */ 
    float: left 
} 

/* clearfix from http://nicolasgallagher.com/micro-clearfix-hack/ */ 
.cf:before, 
.cf:after { 
    content: " "; 
    display: table; 
} 

.cf:after { 
    clear: both; 
} 

Fiddle