Consultation on block layout in streamlit

Using Streamlit
1

How to define a div like content in streamlint. This div should have a box to distinguish boundaries. Then, through Python’s for loop, traverse the content in the data. I know that writing directly is possible, but I hope to have 4 divs in the same line.
Thank you :slight_smile:

import streamlit as st

# Assume you have a list of content
content = ["Element 1", "Element 2", "Element 3", "Element 4", "Element 5"]

# Define the CSS styling for the div
div_style = """
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
"""

# Use a for loop to iterate over the content and display it within the divs
for item in content:
    # Create a container with the defined CSS styling
    st.markdown(f'<div style="{div_style}">{item}</div>', unsafe_allow_html=True)
2

Hi @QIN_DJ

There are several ways to approach this.

  1. To implement this using Streamlit methods you can use st.columns to create columns and within the column you can use st.markdown to implement each of the div contents.

  2. To implement this in pure HTML, you can create a table to encapsulate the contents within.

  3. To implement this using CSS, you can create CSS elements and then use it by specifying the CSS element name in the class parameter.

.element-name {
     text-align: center;
     /* Any other styles you want to specify goes here */
}

<div class =“element-name”>
    {Content goes here}
</div>
  1. Using your approach, but also specify an additional opening and closing
    and
    , respectively, to encapsulate your iterated divs. Also implement this for the above option 3.

Hope these are helpful

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.