简体   繁体   English

如何我如何正确对齐里面的文字<p>同时保持正确的段落模式?</p>

[英]how How do I align right the text inside <p> while maintaining the correct paragraph mode?

Texts are displayed word-for-word in both and文本在两者中逐字显示

sections after specifying margins.I want the contents of the first and指定边距后的部分。我想要第一个和

tags to be on the left and the contents of the second and标签在左边和第二个的内容和

tags to be on the right.I want to solve this operation according to properties such as margin left, margin right and inline styling.I am currently training at this level and I have to practice with this tool标签要在右边。我想根据左边距,右边距和内联样式等属性来解决这个操作。我目前正在这个级别进行培训,我必须使用这个工具进行练习

<!doctype html>

<html lang="en";>

  <head>


     <title>solarise_mk</title>

    


  </head>

  <body style="background-color:rgb(233, 150, 122);">
                    <br>
                    <br>
                    <br>



           <!--Several nested tags to create a key to link to another site-->

                         <!--start coding for  the key -->


                    <a href="https://www.herzing.edu/description/computer-programmer ">
                               <h1 style="text-align:center;">
                                      <mark  style="background-color:rgb(64,224,208);
                                                    color:rgb(233, 150, 122);
                                                    padding:30px;
                                                    border-radius:35px;
                                                    font-family:Times New Roman";> 
                                                          
                                                          solarise-mk
                                        </mark>
                                </h1>
                    </a>


                        <!--end coding for yhe key-->
      

                    <br>
                    <br>  
                    <br>
                    <br>   
                    <br>  




       <!--The following code is for inserting a photo from another site-->

                   <center>     
   
                   <img src="https://www.herzing.edu/sites/default/files/styles/fp_960_640/public/2020-09/it_computer_programming.jpg.webp?itok=8aEwtSxk" alt="What Does a Computer Programmer Do?" style="width:1000px;height:700px;">
 
                  
                   </center>

 
                            <!--ending coding for photo-->


     
                   <br>
                   <br>  
                   <br>
                   <br>
                   <br> 



              <!--start first Start the first header and paragraph-->

  
                  <h3 style="color:rgb(139,0,139);font-family:Times New Roman;margin-left: 10%;margin-right: 90%;">Site goals:</h3>
                  <p style="color:rgb(255,240,245);font-family:Times New Roman;;margin-left: 10%;margin-right: 90%;">

                           we want to introduce you 
                           exciting art of computer programming
                           And what programming is,what capabilities
                           are needed...
                           If you find you are interested in this 
                           technique And you have traces of the ability 
                           to accurately observe and then analyze
                           them correctly,Join us to enter the field of
                           programming professionally
                   </p>

   <!--end first the firstparagraph-->


                    <br>
                    <br>  
                    <br>
                    <br>
                    <br> 


                    <!--Start the second header and paragraph-->



                     <h3 style="color:rgb(119,136,153);font-family:Times New Roman;margin-left: 90%;margin-right: 10%;">As the site owner:</h3>
                     <p style="color:rgb(230,230,250);font-family:Times New Roman;;margin-left: 90%;margin-right: 10%;">
                        
                        Ever since I got to know myself, I have noticed
                        I prefer to have a private and safe environment
                        to think about analyzing problems and to
                        discovering creative solutions to solve them.
                        Usually I look around in detail, Unless I'm
                        focused on fatigue.I am interested in mathematics,
                        painting and artwork.Of course, mathematics,
                        except for arithmetic and mental counting,because
                        sometimes it is difficult for me to concentrate
                        and I basically know this as long as there 
                        is a calculator.
                        People around me tell me that you are smart but 
                        distracted and I believe in this judgment.
                        Distraction has become a problem for me in 
                        many places,if I did not have the other 
                        capabilities next to it might have been a 
                        problem .
                        Finally, I love programming and one of
                        my goals is to specialize in this field e.        
                                                                                                                                                                                                        


                                                                                                                                 
                                                                                                                                                                                                
                  </p>

                  <!--end the second header and paragraph-->



  </body>
  </html>

Doing all that inside one single paragraph tag is unnecessary and not often done.在一个单独的段落标签中完成所有这些是不必要的,而且不经常这样做。 You should instead divide the content up into 3 sections.相反,您应该将内容分成 3 个部分。 One for the left content, one for the center content and the last one for the right content.一个用于左侧内容,一个用于中心内容,最后一个用于右侧内容。 Do this with <div> tags (or other elements such as <aside> and <main> ):使用<div>标签(或其他元素,例如<aside><main> )执行此操作:

<div class="left_div">Left content</div>
<div class="center_div">Center content</div>
<div class="right_div">Right content</div>

/* css */

.left_div { width: 20%; text-align: left; }
.center_div { width: 60%; text-align: center; }
.right_div { width: 20%; text-align: right; }

This produces 3 sections or divisions, where text-align takes care of aligning the contents of the divs.这会产生 3 个部分或分区,其中 text-align 负责对齐 div 的内容。

You can also use float: left;你也可以使用float: left; (or right; ) on image elements or button elements to make those elements shift to one side while making the text around it flow around the object that is floated. (或right; )在图像元素或按钮元素上,以使这些元素移动到一侧,同时使其周围的文本围绕浮动的 object 流动。 This is often done with images inside of text.这通常是通过文本内的图像来完成的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM