具有图像的响应div与文本对齐100%

时间:2015-07-17 09:52:15

标签: html css

我正在尝试将图像对齐某些文本/列表,同时图像仍然是100%高度且在div内。到目前为止,我已经接近但图像总是与div的底部重叠。这是我尝试实现的一个例子:

enter image description here

这是我到目前为止提出的代码,我一直在使用内联CSS但是一旦我发现它已经在一个单独的CSS中文件。任何帮助都非常感激,一直试图解决这个问题!

  <div style="background: #000; width: 90%; color: #fff; margin: 0 auto; text-align:left; border: 1px solid #95403c;">
    <p>
    <img style="float: right; margin: 1px 1px 1px 1px; width: 355px;" src="" />
    <div align="center">

    <h1>Gold (proper style coming soon)</h1><br />
    <clear>
      <u>All Edited Videos Include:</u>
        <ul style="display: inline-block; text-align: left;">
          <li>60-90 Minute Interview Documentary</li>
          <ul><li>B-Roll Footage</li>
          <li>Incorporation of personal video clips (up to 15) and photographs (up to 125)</li>
          <li>Interview Transcript</li></ul>
          <li>1-2 Minute Individual Clips of Family Members </li>
          <li>Up to 5 individuals will share a favorite memory with or express their love for the subject </li>
          <li>5-10 Minute Prized Possession</li>
          <li>The subject will share and describe their most prized possession</li>
          <li>Behind The Scenes Photographs</li></ul>
        </ul>

    <clear>
    <div style=" display: inline-block;  vertical-align: top;">
      <u>You Will Receive:</u>
        <ul  style="display: inline-block;  text-align: left;">
          <li>USB flash drive with all edited video files,<br /> pictures, and interview transcript</li>
          <li>15 DVDs</li>
            <ul><li>Customized printed DVDs</li>
            <li>Customized menu and chapters</li>
            <li>Hard cases with customized insert</li></ul>
        </ul></div>

    <div style="display: inline-block;  vertical-align: top;">
      <u>All Edited Videos Include:</u>
        <ul  style="display: inline-block; text-align: left;">
        <li>Customized Titles</li>
        <li>Customized Graphics</li>
        <li>Music</li>
        <li>Sound Design</li>
        <li>Color Correction</li>
      </ul>
    </div>


    <clear>

    <br style="clear: both;" /></p>

</div>

0 个答案:

没有答案