3

私が抱えている小さなhtml/cssの問題で誰かが私を助けることができるかどうか疑問に思っていました. 基本的に、各リスト項目の箇条書きに異なる画像を使用し、同じ行の右側にテキストを配置して、順序付けられていないリストを作成しようとしています。より具体的には、一番上の行にヘッダーがあり、その下に通常のテキストがあります。現時点では、画像とテキストを同じ行で取得できます:-(これが私のコードです。

どんな助けでも大歓迎です。

HTML:

<ul>
    <li class="service-list">
        <a href=""><img src="image.png" alt="icon" class="alignnone size-full wp-image-156" /></a>
        <h3>Header</h3>
        <p>
        text goes here
        </P>
    </li>
....
</ul>

CSS:

.service-list {
    list-style-type: none;
    margin-left:0px;
    padding-left:0px;
    float: left;
    display: inline-block;
}


.service-list p {
    text-align: right; 
    margin: 0; 
    padding: 0;
}
4

3 に答える 3

0 

.items-list {
box-shadow: -2px 1px 14px #e5e6e8;
list-style-type: none;
margin-left:0px;
padding-left:0px;
margin-bottom:15px;
width:100%;
}


@media only screen and (max-width:400px)  {
.items-list {
height:110px;
}
.items-list .kmtext {
  padding-bottom:6px;
}
.items-list img
{
float:left;
 width:40%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 5px;
}
}
@media only screen and (min-width:401px) and (max-width:500px)  {
.items-list {
height:200px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 15px;
}
}

@media only screen and (min-width:501px) and (max-width:700px)   {
.items-list {
height:250px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 40px;
}
}
@media only screen and (min-width:701px) and (max-width:1399px)  {
.items-list {
height:300px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 50px;
}
}
@media only screen and (min-width:1400px) {
.items-list {
height:330px;
}
.items-list .kmtext {
  padding-bottom:20px;
}
.items-list img
{
float:left;
 width:45%;
 height:100%;
 margin-right:7px;
}
.items-list .righttxt {
 width:100%;
padding: 60px;
}
}
.items-list img
{
 object-fit: cover;
border-right: 5px solid;
border-image:   linear-gradient(to bottom, #86DF7B 50%,#7BAADF 50%) 2;
}

.items-list .kmtext {
  color:#26b7a1;
  font-size:80%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .pricetext {
  color:#020202;
  font-weight:bold;
  padding-bottom:6px;
  font-size:120%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.items-list .titletext {
  color:#919396;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
<ul>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
<li class="items-list">
<a href="http://jsfiddle.net/7s50ps6q/3/"><img src="https://apollo-ireland.akamaized.net/v1/files/rf81eztjcij11-NG/image;s=272x0" alt="icon" width="200" height="auto" /></a>

<div class="righttxt">
<div class="kmtext">
  62KM
</div>
<div class="pricetext">
  64N
</div>
<div class="titletext">
  This is title here
</div>
</div>
</li>
</ul>

これは、両方のメディア クエリを使用しても問題ありません。自分の肖像に合わせて再スケーリングできます

于 2018-05-13T12:21:41.497 に答える