Question

我正在尝试在正文中设置单独的部分，这些部分会像这样显示信息

使用float: left;没有帮助，只会弄乱页面布局。

这是我的HTML ...

    <div Id="wrapper">
      <section>
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px id="pic">
                <p>info</p>
              </a>
            </li>
          </ul>
        </section>

        <section>
          <ul id="g">
            <li>
              <a href="img/googleplay.jpg">
                <img src="img/googleplay.jpg" alt="" width=180px id="pic">
                <p>info</p>
              </a>
            </li>
          </ul>
        </section>
    </div>

这是我的css ......

#a, #g {
    background-color: #6d6d6d;
    color: #bdc3c7;
    list-style: none;
}

#pic {
    margin: +5% 0 0;
    border: 3px solid black;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

Answer 1

尝试使用SELECT * FROM dbo.MyCountFunction(3);

float:right

#wrapper ul {
    padding: 0;
    margin: auto;
    width: 80%;
    list-style-type: none;
}

#wrapper ul li {
    background-color: #6d6d6d;
    padding: 30px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

#wrapper ul li img {
    float: left;
}

#wrapper ul li .details {float: right;width: 75%;}

Answer 2

为什么您为图像使用相同ID的多个实例使用相同的名称？ ID应该是唯一的，如果你要分组，你最好使用一个类。检查我的解决方案以寻找您的问题：

#a, #g {
    color: #bdc3c7;
    list-style: none;
}

.pic {
    margin:+5% 0 0;
    border: 3px solid black;
    float:left;
}

.sections {
  height:100px;
  background-color: #6d6d6d;
}

.info {
  margin:+5% 10px;
  float:left;
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  list-style: none;
}

   <div Id="wrapper">
      <section class="sections">
          <ul id="a">
            <li>
              <a href="img/appstore.jpg">
                <img src="img/appstore.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>
        </section>

        <section class="sections">
         <ul id="g">
            <li>
              <a href="img/googleplay.jpg">
                <img src="img/googleplay.jpg" alt="" width=180px class="pic">
                <p class="info">info</p>
              </a>
            </li>
          </ul>   
        </section>
    </div>

我将部分标签归类为您需要添加背景颜色并设置高度。您需要在项目浮动时设置高度，以便它们不会自动拉伸该部分，因此您需要提供固定的高度。
我在你的段落中添加了类，因为这些类还需要和你的图像一起浮动。您还需要为图像添加相同的边距。
我将你的照片ID改为了类。

如果您有任何疑问，请与我们联系。

Answer 3

更改ID =＆＃34; pic＆＃34; to class =＆＃34; pic＆＃34;。因为ID应该在页面中使用一次..

然后写入css：

.pic {
float: left;
}

Answer 4

我改变了你的代码并列出了一些东西..告诉我，如果我误解了你的问题..

    <html>
    <head>
      <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
      <style>
            #a, #g {
                background-color: #6d6d6d;
                color: #bdc3c7;
                list-style: none;
                width: 100%;
            }

            #pic {
                margin: +5% 0 0;
                border: 3px solid black;
                display:table-cell; width:100px;height:100px;
            }

            #wrapper {
              max-width: 1200px;
              margin: 0 auto;
              padding: 0 5%;
              list-style: none;
            }
            section{
                width: 100%;
            }

      </style>
    </head>
    <body>
        <div Id="wrapper">
          <section>
                  <a href="img/appstore.jpg" id="a">
                    <div style="display:table" id="g">
                        <div style="" id="pic">
                            <img src="img/appstore.jpg" width=180px alt="">
                        </div>
                        <div style="padding:12 16;">
                            <p>info</p>
                        </div>
                    </div>      
                  </a>

            </section>

            <section>
                <a href="img/googleplay.jpg">
                    <div style="display:table" id="g">
                        <div style="" id="pic">
                            <img src="img/googleplay.jpg" alt="" width=180px>
                        </div>
                        <div style="padding:12 16;">
                            <p>info</p>
                        </div>
                    </div>      
                </a>
            </section>
        </div>
    </body>
</html>

如何在html中将文本放在图片右侧

4 个答案: