CSS、HTML中的文本定位

Question

我想要定位段落，如示例所示

​

​

最好的方法是什么呢？我试着用第一段写一些东西，但似乎不起作用。这似乎是一个简单的解决方案，但我想找到最好的方法，所以代码是干净的，易于阅读。这是我在这一点上所拥有的

我的作品

​

​

任何帮助都是非常感谢的。

​

         .fotke1 {
            
            border-top: 8px solid #029794;
            position: relative;
            float: right;
            right: 30px;
            top: -30em;
            border: none;
          }
          .sarasas {
            background-color: #EEE8AA;
            width: 220px;
            height: 220px;
            float:right;
            

          }

          #privalumas1 {
            font-size: 14px;
            margin-top: -20px;
            margin-bottom: -10px;
            
            padding: 0px;
          }
          #trukumas1 {
            font-size: 14px;
            margin-top: -9px;
            
            padding: 0px;
           
          }
         h3 {
            font-size: 17px;
             
         }
         .privalumai {
             margin-left: 12px;
             margin-top: -12px;
             font-size: 15px;
         }
         .trukumai {
            margin-left: 12px;
            margin-bottom: -12px;
            margin-top: -12px;
            font-size: 15px;
         }
         .kainos {
             font-size: 14px;
             margin-top: -9px;
             margin-left: 12px;
         }
         p.lyjant {
             width: 380px;
             word-break: normal;
             
         }

         .fotke2 {
            
            border-top: 8px solid #029794;
            position: relative;
            float: right;
            right: 30px;
            top: -30em;
            border: none;
          }
          #privalumas2 {
            font-size: 14px;
            margin-top: -20px;
            margin-bottom: -10px;
            
            padding: 0px;
          }
          #trukumas2 {
            font-size: 14px;
            margin-top: -9px;
            padding: 0px;
          }

<div class="autoriai">
            <p><a href="mailto:webmaster@example.com">Audrius Vaičiūnas</a><br>
               <a href="mailto:webmaster@example.com">Linas Babrauskas</a></p>
            </div>

            <div>
                <p class="lyjant">text1</p>
            <h3>„ATI Radeon 9800 XT“ ir „9600 XT“ </h3>
            <p>text2</p>
                </div>
       
        
                <div class="fotke1">

           
            <img src="9800.jpg" height="220" width="255" atl="ASUS Radeon 9800"/>

            <div class="sarasas">
                <a href="https://www.asus.com/lt/Graphics-Cards/A9600XTTVD128M/" target="_self"></a><h3>ASUS Radeon 9800 XT/TVD</h3>
                
            <p class="privalumai"><b>Privalumai:</b></p>
            <div id="privalumas1">
            <ul>

                <li>puikūs našumo rezultatai</li>

                <li>vaizdo signalo įvesties ir išvesties funkcijos</li>
                
                <li>puiki programinė įranga, daug priedų </li>
            </ul>
            </div>
            
               <p class="trukumai"><b>Trūkumas</b></p>
               <div id="trukumas1">
            <ul>
                <li>didelė kaina</li>
            </ul>
            </div>
            <div class="kainos">
            <p><b>Kaina</b> 1 949 litai<br><b>Bendrovė</b> "Mikrodata"</p>
        </div>
        </div>
        </div>



        <div class="fotke2">
            <img src="9600.jpg" height="220" width="255" alt="ASUS Radeon 9600"/>
            <div class="sarasas">
            <a href="https://www.asus.com/lt/Graphics-Cards/A9600XTTVD128M/" target="_blank"></a><h3 class="9600">ASUS Radeon 9600 XT/TVD</h3>
      
            <p class="privalumai"><b>Privalumai:</b></p>
            <div id="privalumas2">
            <ul>


                <li>labai geri našumo rezultatai</li>

                <li>vaizdo signalo įvesties ir išvesties funkcijos</li>
                
                <li>puiki programinė įranga, daug priedų </li>
                </ul>
            </div>
                <p class="trukumai"><b>Trūkumas</b></p>
                <div id="trukumas2">
                <ul>
                <li>didelių trūkumų nepastebėta</li>
            </ul>
        </div>
        <div class="kainos">
            <p><b>Kaina</b> 699 litai<br><b>Bendrovė</b> "Mikrodata"</p>
            </div>
        </div>
        </div>
    </div>

​

Answer 1

如果复制多列布局对您很重要，那么请注意，让CSS将<aside>放在右上角，然后将多列包裹在<aside>周围并不是一件简单的事情。

但是，如果您喜欢<aside>位于多列布局的下方，那么您可以完全直接地重新生成列，只需使用：

column-count: 3;

工作示例：

​

article {
  column-count: 3;
  column-width: 33%;
  column-gap: 24px;
  column-rule: 1px solid rgb(191, 191, 191);
}

h2 {
  column-span: all;
  margin-top: 6px;
}

.author {
  text-align: right;
  font-weight: 700;
}

.author,
.standfirst {
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
}

aside {
  display: block;
  height: 372px;
  padding: 12px;
  background-color: rgb(255, 235, 182);
}

aside ul {
  clear: both;
  float: right;
  width: 48%;
  height: 180px;
  margin: 0;
  padding: 12px 0 0 24px;
  background-color: rgba(255, 125, 0, 0.3);
  box-sizing: border-box;
}

aside img {
  display: block;
  float: left;
  width: 48%;
  height: 180px;
  margin: 0 12px 12px 0;
  background-color: rgba(255, 0, 0, 0.3);
  box-sizing: border-box;
}

<section>
<article>
<h2>Long Headline will go at the top, here</h2>

<div class="author">Author1 Here</div>
<div class="author">Author2 Here</div>

<p class="standfirst">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<h3>Why do we use it?</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

<h3>Where does it come from?</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>

<h3>Where can I get some?</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</article>

<aside>
<div>
<ul>
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
</ul>
<img alt="Image Here" />
</div>

<div>
<ul>
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
</ul>
<img alt="Image Here" />
</div>
</aside>
</section>

​

Answer 2

这里有一个你想要的布局的例子。尝试通过this article来更好地理解CSS网格。

​

.para1 {
  grid-area: para1;
}
.para2 {
  grid-area: para2;
}
.para3 {
  grid-area: para3;
}
.para4 {
  grid-area: para4;
}
.para5 {
  grid-area: para5;
}
img {
  grid-area: img;
  max-width: 100%;
}
.article-section {
  display: grid;
  grid-template-areas:
    "para1 img img"
    "para2 img img"
    "para3 para4 para5";
  grid-gap: 20px;
}

p{margin: 0;}

<div class="article-section">
  <p class="para1">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>
  <img src="https://www.niemanlab.org/images/guardian-1969-darker.jpg" alt="article" />
  <p class='para2'>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.
  </p>
  <p class='para3'>
    Looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
  </p>
  <p class='para4'>
    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  </p>
  <p class='para5'>
    Why do we use it?
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

</div>

​