how How do I align right the text inside <p> while maintaining the correct paragraph mode?
Question
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>
1 answers
solution1
0 2021-12-27 18:39:20
Doing all that inside one single paragraph tag is unnecessary and not often done. You should instead divide the content up into 3 sections. 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 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.
You can also use 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. This is often done with images inside of text.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.