如何在图像旁添加此权限？

Question

＆＃13;

＆＃13;

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
}

＆＃13;

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <li class="description_os">
      <ul>OS</ul>
    </li>
    <li class="descrption_ram">
      <ul>RAM</ul>
    </li>
    <li class="descrption_storage">
      <ul>STORAGE</ul>
    </li>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想在手机图像旁添加价格，操作系统，内存 这是我的形象： demo-one
我试过了：
float:right; margin:
浮动属性，我可以将它移动到右侧，但边缘，我无法向上和向左移动它。 即使我设法将它移到图像旁边，它也会在较小尺寸的设备上打破。

Answer 1

＆＃13;

＆＃13;

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  
  float:left;
}
.description_box_1{
  
  float:left;
  margin-left:25px;
}

ul{
margin:0;
}

＆＃13;

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
    <li class="description_os">
      OS
    </li>
    <li class="description_ram">
      Ram
    </li>
    <li class="description_storage">
      Storage
    </li>
    </ul>
    
    
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您已将ul放入li，这是错误的。 ul是li的父级，因此li必须位于ul。

这和你想要的一样吗？ 希望这会有所帮助。

Answer 2

html标签的列表项元素应该由无序列表元素覆盖，这意味着“ul”标签应该将子元素作为“li”

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>

    </ul>
    <li class="description_os">
      OS
    </li>
    <li class="descrption_ram">
      RAM
    </li>
    <li class="descrption_storage">
      STORAGE
    </li>
  </div>
</div>

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  float:left;
}
.description_box_1{
  float:left;
  margin-left: 10px;
}

https://fiddle.jshell.net/hofh146n/

Answer 3

为了将图像和文字保持在1行，这里有2个很好的解决方案，即使在较小的设备上也是如此。

注意，由于ul需要li，我删除了您的内部ul

首先，最经典的一个，在图片上使用BFC float，在文字上使用margin-left。

当在两个元素上使用float或inline-block时，这避免了带有内联块和宽度计算的空格问题。

＆＃13;

＆＃13;

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
  float: left;
}
.description_box_1 {
  margin-left: 176px;    /*  160px width + 14px padding + 1px + 1px border  */
}

＆＃13;

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="http://lorempixel.com/160/250/technics/7/" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os">
        OS
      </li>
      <li class="descrption_ram">
        RAM
      </li>
      <li class="descrption_storage">
        STORAGE
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

其次，使用Flexbox的更现代的解决方案

＆＃13;

＆＃13;

.article {
  display: flex;
}

.item_one_image {
  border: 1px solid #ccc;
  padding: 4px 0px 10px 14px;
}

.description_box_1 {
  flex: 1;                   /*  take all the remaining space  */
}

＆＃13;

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="http://lorempixel.com/160/250/technics/7/" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os">
        OS
      </li>
      <li class="descrption_ram">
        RAM
      </li>
      <li class="descrption_storage">
        STORAGE
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需添加 .item_one_image，.description_box_1 {float：left; 代码进入你的CSS。并更改 ul，li 结构。请参阅以下HTML部分中的代码。

＆＃13;

＆＃13;

.item_one_image {
  border: 1px solid #ccc;
  width: 160px;
  padding: 4px 0px 10px 14px;
  height: 250px;
}

.item_one_image, .description_box_1 {
  float: left;
}

＆＃13;

<div class="article">
  <div id="title_1">
  </div>
  <div class="item_one_image">
    <img src="#" alt="demo image" />
  </div>
  <div class="description_box_1">
    <div class="price_1">
      <span>PRICE:</span>
    </div>
    <ul>
      <li class="description_os"> OS </li>
      <li class="descrption_ram"> RAM </li>
      <li class="descrption_storage"> STORAGE </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;