Question

我不是网络开发者，而是更多的Photoshop设计师，我打算制作一个不错的列表样式，将其添加到个人 wordpress 博客中。我从设计材料中获得了很多设计灵感，其效果非常像下面的图片。

enter image description here

所以我决定尝试创建一个最终看起来像这样的html和css设计。

enter image description here

我尝试在文本中添加一些边距和填充，但似乎没有向右移动内容文本。我该怎么做才能解决这个问题？

html代码 -

  <div>
  <ul>
    <li class="paper">
      <div class="papercontent">
      <img class="pimg" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2014/12/oneplus-one-top10.png" alt="oneplus-one-top10" width="452" height="300"  />
      <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
      <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
      </div>
 </li>

我的自定义css除了wordpress post css -

.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
}
.ptext
{
  margin-right: .1em;
  margin-left: .1em;
  font-size: 0.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
max-width: 100%;
  float: left;
height: auto;
}

如果我的方法有误，请指导我。谢谢

Answer 1

.pimg {
max-width: 100%;
float: left;
height: auto;
margin-right: 20px; /* add */
}

工作演示http://jsfiddle.net/aavk7g9m/2/

Answer 2

尝试将此添加到您的CSS

.ptext{
padding-left:10px;
}

Answer 3

jsfiddle示例：jsfiddle.net/aavk7g9m/（所以我不会在没有代码的情况下放置链接而且我没有任何要显示的内容......）

我认为它在这里工作？我想那是（wordpress）上下文呢？

Answer 4

查看我的PEN 我个人喜欢将元素中的区域分开以进行更精细的控制。在这种情况下，我将你的照片和文字包裹在2个不同的div中，这样它们可以相互浮动。

我已将box-sizing: border-box添加到所有元素，以便您可以填充文本（在填充元素边框的边界内添加填充）而不影响列表项的宽度/布局 - 您应该是如果您想要宽度如60％+ 40％= 100％，请使用此选项。如果没有这个，填充将被添加到外部，从而打破你的布局，因为你的div不再等于100％。

<强> HTML：

 <div id="main">
     <ul>
         <li class="paper">
             <div class="papercontent">
                 <div class="inner first">
                     <img class="pimg" src="http://placekitten.com/g/350/350" alt="oneplus-one-top10" />
                 </div>
                 <div class="inner second">
                     <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
                     <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
                 </div>

             </div>
         </li>
     </ul>
</div>

<强> CSS：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#main {
    display: block;
    margin: auto;
    max-width: 830px;
}
ul {
    margin: 0;
    padding: 0;
}
.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
    margin: 0;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
    float: left;
}
.ptext
{
  font-size: 0.8em;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
    max-width: 100%;
    float: left;
    height: auto;
}
.inner {
    float: left;
}
.inner.first {
    width: 40%;
}
.inner.second {
    width: 60%;
    padding: 16px;
}

当使用保证金或填充时，文本会相应地获得保证金？

4 个答案: