如何使用css在html中设置flex内联？

Question

How can we set the css such that each each sentence in row should have fixed proportionate width and box for each row and column should have fixed proportionate.

Currently its so much messed if look in the code. I tried is creating display: flex; justify-content: flex-start; display: flex; justify-content: flex-start;

I want p tag should have some fixed width the some space and then the span tag with border

Is there any other way to do it?

 .droppable { padding: 5px 10px 5px 5px; margin: 10px; display: flex; justify-content: flex-start; } .droppable p{ font-size: 20px; } .droppable .missing-words_blank{ display : table; text-align: center; height: 40px; margin: auto; border: 1px solid black; background-color: #d6edfd; } .missing-words_blank span{ display: table-cell; vertical-align: middle; color: #1776bb; font-size: 20px; }

 <div> <div class="droppable"> <p>Enter city name in box</p> <span class="missing-words_blank droptarget vertical"><span id="1" draggable="true">Welcome</span></span> </div> <div class="droppable"> <p>Enter country name in box do verify</p> <span class="missing-words_blank droptarget"><span id="2" draggable="true">Home</span></span> </div> <div class="droppable"> <p>Enter state name</p> <span class="missing-words_blank droptarget vertical"><span id="3" draggable="true">Rhonda</span></span> </div> </div>

Answer 1

Just add something like width: 50%; to .droppable p in CSS. Take a look:

 .droppable { padding: 5px 10px 5px 5px; margin: 10px; display: flex; justify-content: flex-start; } .droppable p{ font-size: 20px; width: 50%; } .droppable .missing-words_blank{ display : table; text-align: center; height: 40px; margin: auto; border: 1px solid black; background-color: #d6edfd; } .missing-words_blank span{ display: table-cell; vertical-align: middle; color: #1776bb; font-size: 20px; }

 <div> <div class="droppable"> <p>Enter city name in box</p> <span class="missing-words_blank droptarget vertical"><span id="1" draggable="true">Welcome</span></span> </div> <div class="droppable"> <p>Enter country name in box do verify</p> <span class="missing-words_blank droptarget"><span id="2" draggable="true">Home</span></span> </div> <div class="droppable"> <p>Enter state name</p> <span class="missing-words_blank droptarget vertical"><span id="3" draggable="true">Rhonda</span></span> </div> </div>

Answer 2

You could use CSS-Tables instead of flexbox

 div { display: table; border-spacing: 5px; border-collapse: separate; } .droppable { padding: 5px 10px 5px 5px; margin: 10px; display: table-row; border-spacing: 5px; border-collapse: separate; } .droppable p { font-size: 20px; display: table-cell; } .droppable .missing-words_blank { display: table-cell; text-align: center; height: 40px; margin: auto; border: 1px solid black; background-color: #d6edfd; } .missing-words_blank span { display: table-cell; vertical-align: middle; color: #1776bb; font-size: 20px; }

 <div> <div class="droppable"> <p>Enter city name in box</p> <span class="missing-words_blank droptarget vertical"><span id="1" draggable="true">Welcome</span></span> </div> <div class="droppable"> <p>Enter country name in box do verify</p> <span class="missing-words_blank droptarget"><span id="2" draggable="true">Home</span></span> </div> <div class="droppable"> <p>Enter state name</p> <span class="missing-words_blank droptarget vertical"><span id="3" draggable="true">Rhonda</span></span> </div> </div>