圖片不能停留在表容器

enter image description here not in container 圖片不能停留在表容器

我試圖讓畫面保持到左邊一列，但它似乎並沒有留下來。正如你所看到的，它懸停在桌子上。我能做些什麼來使它保持在桌子內？文本

<table align="center" style="width:550px" id="table" cellpadding="5"> 
 
    <tr> 
 
    <th style="text-align: left" rowspan="2"> 
 
     <img src="avi.png" alt="" id="avatar" /> 
 
    </th> 
 
    <th style="text-align: left"> 
 
     <h1 id="hello">My Resume</h1> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td style="text-align: left"> 
 
     <p>Hello this is a crazy little test that i am doing to see if this code works</p> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-09-30 Michael Giron

你想要圖像覆蓋文本？ –

我想要的東西是這樣的：http://seanhalpin.io/ –

如果你在頁面的中間看到它說「我能做什麼」，你可以看到他有一張左邊的圖片和右邊的文本，然後根據這一點，他倒過來了。我想這樣做，但是當我這樣做時，我的照片不斷重疊文本，而不是像下面的例子 –

如果你特別希望像你給的例子，使用表格是做舊的方式笨重。我建議使用flexbox，這是一種簡單的方法，使它們看起來不錯。

下面是一個例子：

body { 
 
    font-family: 'Helvetica Neue', Helvetica, sans-serif; 
 
} 
 
.resume { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.resume-picture { 
 
    border: 10px solid #1976D2; 
 
    border-radius: 50%; 
 
    background: #f3f2f1; 
 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
 
    height: 175px; 
 
} 
 
.resume-content { 
 
    padding: 0 15px; 
 
} 
 
.resume-content h2 { 
 
    color: #1976D2; 
 
    margin-top: 0; 
 
} 
 
.resume-content p { 
 
    color: #333; 
 
    margin: 0; 
 
}

<div class="resume"> 
 
    <img class="resume-picture" src="https://avatars2.githubusercontent.com/u/3534427?v=3" /> 
 
    <div class="resume-content"> 
 
    <h2>My Resume</h2> 
 
    <p>Hello this is a crazy little test that i am doing to see if this code works. 
 
     <br>Hello this is a crazy little test that i am doing to see if this code works. 
 
     <br>Hello this is a crazy little test that i am doing to see if this code works.</p> 
 
    </div> 
 
</div>

我希望這是諸如此類的事情，你正在尋找。

來源

2016-09-30 08:24:34

那激動人心的我想要的！謝謝。你是一個拯救生命的人。最後的快速問題。文字和圖片之間似乎存在很大的差距，我希望它們靠得更近，這樣它就像礦石一樣居中。我會怎麼做？ –

應該沒有差距，你使用的瀏覽器是什麼？ –

我正在使用谷歌瀏覽器。我如何在評論上添加圖片，以便讓Incan向您展示屏幕截圖？ –

覆蓋圖像

<table align="center" style="width:550px;border:1px solid #c2c2c2; position: relative;" id="table" cellpadding="5" border="0"> 
 
    <tr> 
 
    <th style="text-align: left;border-right:1px solid #c2c2c2;min-width:50px;" rowspan="2"> 
 
     <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" style=" 
 
     position: absolute; 
 
     bottom: 0; 
 
     left: 14px; 
 
     top: 33px; 
 
     z-index: 2; 
 
     opacity: 0.5;" /> 
 
    </th> 
 
    <th style="text-align: left;border-bottom:1px solid #c2c2c2;"> 
 
     <h1 id="hello">My Resume</h1> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td style="text-align: left"> 
 
     <p>Hello this is a crazy little test that i am doing to see if this code works</p> 
 
    </td> 
 
    </tr> 
 
</table>

表容器更新風格形象

<table align="center" style="width:550px;border:1px solid #c2c2c2;" id="table" cellpadding="5" border="0"> 
 
    <tr> 
 
    <th style="text-align: left;border-right:1px solid #c2c2c2;" rowspan="2"> 
 
     <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" /> 
 
    </th> 
 
    <th style="text-align: left;border-bottom:1px solid #c2c2c2;"> 
 
     <h1 id="hello">My Resume</h1> 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td style="text-align: left"> 
 
     <p>Hello this is a crazy little test that i am doing to see if this code works</p> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2016-09-30 04:29:10

圖片不能停留在表容器

回答

相關問題